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

你好，我有以下设置：

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

像这样

.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');        
});

这个CSS有效吗

澄清后更新：

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

---

在这里拉小提琴

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

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

---

你的CSS在哪里？@Aaron我想是CSS3。CSS文件位于我的Rails应用程序的资产管道中。@Aaron my bad。我正在做。@Valentingev没问题，这就是为什么你的问题被其他用户标记下来的原因。@Aaron谢谢你，我是初学者，我不认为这有什么关系。否：/图像不应该一直都是透明的，只有当一个悬停时，一个悬停的图像应该是完全不透明的。问题可能是这个问题没有准确描述你想要什么。下次请尝试更具体一些。图像不应该一直是透明的，只有当一个悬停时，悬停的图像应该是完全不透明的。@Valentingev使用纯CSS肯定有办法做到这一点，但它们不是很灵活，你会不断地处理它。我建议您使用jQuery。我用一些示例jQuery更新了我的答案，这应该会让你开始。谢谢你，Derek，我会尽快尝试。您好，谢谢你的回答，但是图像不应该一直是透明的，只有当一个悬停时，悬停的图像应该是完全不透明的。这就是代码的作用。将不透明度设置为1，该值为实心，除非悬停，否则会将图像变为不透明0Oh，no，mate。还不是这样。

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

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