javascript-jQuery:更改附近元素悬停时的不透明度

将鼠标悬停在图像或< p>上时,需要更改图像的不透明度.它上面.这是html结构

<div id="article-menu">
  <ul>
     <p>Image</p>
     <li><img src="..." /></li>
  </ul>
</div>

jQuery的

$("#article-menu img, #article-menu p").hover(function() {
    $(this).closest('img').css('opacity', 1);
}, function() {
    $(this).closest('img').css('opacity', 0.7);
});

这是行不通的.仅当您将实际图像悬停在p元素上时,它才起作用.

解决方法:

仅CSS解决方案:

#article-menu li > img {
    opacity: .7;
}

#article-menu p:hover + li > img, 
#article-menu li > img:hover {
    opacity: 1;
}

…尽管您的标记无效.您的p必须是li.

演示:http://jsfiddle.net/DYWKU/(我将p更改为< li class =“ p”>)

上一篇:去掉el-table表格的默认样式,表头颜色,hover的效果


下一篇:bootcss 之 .table-hover 类 鼠标悬停