修改

Question

美好的一天，我有这个设置：

<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;
}

Answer 1

喜欢这个吗？

.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

Answer 2

.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>

Answer 3

继续上面的评论，这就是你想要的......

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

在此处http://jsfiddle.net/1y8e7699/

Answer 4

你可以通过jQuery实现这个目标。像这样的东西

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

CSS：Hover会影响其他元素而不是其他元素

4 个答案:

修改