Cách kích hoạt trạng thái di chuột liên kết khi di chuột qua LI mẹ của nó. jQuery

Question

Tôi đang cố gắng kích hoạt trạng thái di chuột trên liên kết văn bản khi di chuột qua li gốc của nó. Điều này có thể trong CSS và thứ hai, tôi thiếu một cái gì đó với .children có thể giải quyết vấn đề này. Đây là HTML:

<li class="video-1">          
    <a href="#"><img src="images/csi-1.gif" alt="csi-1" width="140" height="80" /></a> 
    <h3 class="show-title"><a href="#">Show TItle</a></h3> 
    <h3 class="ep-name"><a href="#">Episode Name</a></h3> 
    <h4 class="season-info">Season 4 | Ep 10<span class="more"><a href="#">See More</a></span></h4> 

</li> 

Và JS:

$(".more").hide(); 

$(".video-1").hover(function() { 
$(".video-1:hover h3.show-title a").css('color', '#006699'),function() { 
    $(this).css("color", "#fff"); 
      }  
    $(".more").toggle(); 

}); 

Answer 1

Bạn có thể làm ảnh hưởng di chuột chỉ với CSS như thế này (trong stylesheet của bạn):

.video-1 .more { display: none } 
.video-1:hover h3.show-title a { color: #006699 } 
.video-1:hover .more { display: block } 

Không JS cần thiết ở tất cả trừ khi bạn cần hỗ trợ IE6 mà chỉ chỉ hỗ trợ :hover trên a yếu tố.

UPDATE:

Bạn có thể thêm một cái gì đó như thế này để HTML của bạn nếu bạn cũng cần phải hỗ trợ IE6:

<!--[if lte IE 6]> 
<script type="text/javascript" charset="utf-8"> 
    jQuery(function ($) { 
    $('#video-1').hover(function() { 
     $(this).addClass('hover'); 
    }, function() { 
     $(this).removeClass('hover'); 
    }); 
    }); 
</script> 
<![endif]--> 

Sau đó điều chỉnh CSS như thế này:

#video-1 .more { display: none } 
#video-1:hover h3.show-title a, #video-1.hover h3.show-title a { color: #006699 } 
#video-1:hover .more, #video-1.hover .more { display: block } 

Và cuối cùng, hãy thay đổi HTML ban đầu của bạn từ một số class thành một số id vì IE6 không hỗ trợ chuỗi liên kết ass tên trong CSS:

<li id="video-1"> 

Answer 2

.video-1:hover{color:#fff} 
.video-1 .more { display: none } 
.video-1:hover .more { display: block; z-index:10 } 

z-index sẽ đảm bảo nội dung hiển thị trên tất cả các yếu tố trên trang