jQuery, чтобы показать элементы при наведении курсора

На моей странице, я хочу иметь эффект, когда элемент наводится на дочерние элементы. Можете ли вы помочь сделать код лучше?jQuery, чтобы показать элементы при наведении курсора

<!DOCTYPE HTML> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title></title> 
    <style type="text/css"> 
     #list a { text-decoration: none; color: green; margin-right: 30px; } 
     #content { margin-top: 30px; } 
     #content a { text-decoration: none;margin-right: 10px; } 
     #content span.first1 { display: none; } 
     #content span.first1 { display: none; } 
     .show { display: inline; } 
    </style> 
    <script src="../jquery-1.10.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('#list a').hover(function() { 
       hover_hidden() 
      }) 
      function hover_hidden() { 
       var length = $('#first a').length 
       var str = ' 

       for(i=0; i<length; i++) { 
        if (i == 0) 
         $('.first').show() 
       else { 
        $('#list a').eq(i).hover(function() { 
         $('.first').hide() 
         var str = '.first' 
         i += '' 
         var newdetail = str + i 
        // alert(newdetail) 
         $("newdetail").addClass('show') 
        }) 
       } 
      } 

      } 
     }) 
    </script> 
</head> 
<body> 
    <div id="list"> 
     <a href="#">first</a> 
     <a href="#">second</a> 
     <a href="#">three</a> 
    </div> 
    <div id="content"> 
     <span class="first"> 
      <a href="#">first</a> 
      <a href="#">first</a> 
      <a href="#">first</a> 
     </span> 
     <span class="first1"> 
      <a href="#">second</a> 
      <a href="#">second</a> 
      <a href="#">second</a> 
     </span> 
     <span class="first2"> 
      <a href="">three</a> 
      <a href="">three</a> 
      <a href="">three</a> 
     </span> 
    </div> 
</body> 
</html>

И я поставил код здесь http://jsfiddle.net/DVdAk/

источник

2013-07-25 sgsheg

, что вы пытаясь отобразить – Hushme

, просто покажите элементы сына, когда элемент «a» hover – sgsheg

Попробуйте

$(document).ready(function() { 
    var $spans = $('#content > span') 
    $('#list a').mouseenter(function() { 
     var index = $(this).index(); 
     $spans.filter(':visible').hide(); 
     $spans.eq(index).show(); 
    }) 
})

Демо: Fiddle

источник

2013-07-25 03:27:29

$(function(){ 
      $('#list a').hover(hoverHidden); 
      function hoverHidden() { 
       var $activeItem = $(this); 
       var $subMenu = $('#'+$activeItem.data('toggle')); 
       $subMenu.show(); 
       $subMenu.siblings().hide(); 

      }

});

http://jsfiddle.net/DVdAk/1/

попробовать это в скрипку

это не является совершенным, но я знаю, что вы могли бы сделать это, идея заключается в том, чтобы использовать DATA- attrabute для указания submanual для отображения

источник

2013-07-25 03:38:57 Sean

jQuery, чтобы показать элементы при наведении курсора

ответ

Смежные вопросы