CSS:悬停会影响其他元素，而不是悬停的元素

CSS: Hover affects other elements instead the hovered one

本文关键字：悬停 元素 其他 影响 CSS      更新时间：2023-09-26

你好，我有这个设置：

<div class="container">
    <div class="project">
        <img>
    </div>
    <div class="project">
        <img>
    </div>
    <div class="project">
        <img>
    </div>
...
</div>

我有一个项目列表和它们的缩略图。当用户悬停在其中一个项目上时，所有剩余项目的缩略图都必须变为半透明。

.custom_container {
    width: 80%;
    margin: 0 auto;
    text-align: center;
}
.project {
    display: inline-block;
    width: 300px;
    margin: 20px;
    margin-top: 0px;
    margin-bottom: 40px;
    p, h4 {
        text-align: left;
    }
    img {
        width: 100%;
    }
    transition: all 0.2s ease-in-out;
}

这样？

.project img {
    opacity: .5;
}
.project:hover img {
    opacity: 1;
}

编辑

根据您的评论，您需要jQuery。

$('.project').on('mouseover', function() {
    $(this).siblings().find('img').css('opacity', '.5');
}).on('mouseout', function() {
    $('.project img').css('opacity', '1');        
});

DEMO

您可以通过jQuery实现这一点。像这样的

$(".project").hover(
function(){
$( ".project" ).not( this ).css( "opacity", "0.5" );},
function(){
$( ".project" ).css( "opacity", "1" );
});

.project > img {
  opacity: 0.4;
  filter: alpha(opacity=40); /* For IE8 and earlier */
}
.project > img:hover{
  opacity: 1;
  filter: alpha(opacity=100); /* For IE8 and earlier */
}

这个CSS能用吗？

http://www.w3schools.com/css/css_image_transparency.asp

澄清后更新：

<script type="text/javascript">
$('.project > img').on('hover', function(){
  $('.project > img').not(this).css({ opacity: 0.5 });
}, function(){
  $('.project > img').css({ opacity: 1 });
});
</script>

继续上面的评论就是你想要的。。。

.project img {
    opacity: 1;
    transition: all ease .2s;
}
.project:hover img {
    opacity: 0;
}

Fiddle herehttp://jsfiddle.net/1y8e7699/

相关文章：