Jquery 在不在选择器中的图像上显示彩色叠加

我正在尝试修改我现在拥有的jQuery，它当前将在悬停的图像顶部显示一种颜色

相反，我需要它在所有其他图像上显示悬停时的悬停颜色。不确定在这个特殊情况下的变化

所以，在6张图像中，如果我将鼠标移到2张上，它将在1,3,4,5,6上显示覆盖

HTML:

<div class="wrap">
<img src="http://mirrorchecker.com/images/rod_160.png" width="160" class="company-image" />
<div class="company-image-overlay"></div>
<img src="http://mirrorchecker.com/images/rod_160.png" width="160" class="company-image" />
<div class="company-image-overlay"></div>
<img src="http://mirrorchecker.com/images/rod_160.png" width="160" class="company-image" />
<div class="company-image-overlay"></div>

.company-image-overlay {
    width: 160px;
    height: 160px;
    background-color: #ffb00f;
    border-radius: 15px;
    z-index: 1;
    opacity: 0.5;
    position: fixed;
    top: 0.5em;
    display:none;
}

jQuery:

$('.wrap').mouseover(function () {
    $('.company-image-overlay').show();
}).mouseout(function () {
     $('.company-image-overlay').hide();
});

---

jsiddle:

好的，我已经修改了你的jsiddle

首先，我改变了着色的方法。我用一种色调将每张图像包裹起来，这种色调在图像的后面，并且始终存在，在本例中，背景为鲜红色。然后通过更改图像的不透明度来实现图像着色。请注意（在JSFIDLE上的CSS中），我已经由px定义了背景色调，这样您就不会在底部有一点突出。（有其他方法可以做到这一点，但px解决方案很快）

jsiddle:

您应该使用

。而不是（这个）

：

---

我做了一些与雅各布非常相似的事情，在那里我改变了很多结构，但我用了一种更简单/更干净/更容易的方式。看看这个：

HTML:

jQuery：

$('.company-image').mouseover(function () {
    $(this).siblings('.company-image').addClass('overlay-show');
}).mouseout(function () {
    $(this).siblings('.company-image').removeClass('overlay-show');
});

：before

psudo元素的用法来自。操作类比伪元素本身更容易，所以我使用类来显示覆盖。jQuery同级选择器也使用

.company image

类选择器，以确保它只获取其他相关元素。如果由于某种原因，您无法将所有图像放在一个父级

div

中，那么您必须使用

$（“.company image”）。而不是（此）

选择器，感谢

祝您好运

是否可以仅对img标记本身而不是其周围的div类产生叠加效果？但是你可以在这个链接上试试这个技巧
$('.wrap img').mouseover(function () {
$('.wrap img').css('opacity', '0.5'); 
$(this).css('opacity', '1'); 
}).mouseout(function () {
$('.wrap img').css('opacity', '1'); 
});

$('.wrap div').mouseover(function () {
    $('.wrap div').not(this).children('.company-image-overlay').show();
})

<div>
    <div class="company-image">
        <img src="http://mirrorchecker.com/images/rod_160.png" />
    </div>
    <div class="company-image">
        <img src="http://mirrorchecker.com/images/rod_160.png" />
    </div>
    <div class="company-image">
        <img src="http://mirrorchecker.com/images/rod_160.png" />
    </div>
</div>

.company-image {
    width: 160px;
    height: 160px;
    display: inline-block;
}
.company-image > img {
    border-radius: 15px;
}
.company-image:before {
    position: absolute;
    content: '';
    width: 160px;
    height: 160px;
    background: rgba(255, 176, 15, 0.5); /* Adjust this last value to adjust the opacity of the overlay */
    border-radius: 15px;
    visibility: hidden;
}
.company-image.overlay-show:before{
    visibility: visible;
}

$('.company-image').mouseover(function () {
    $(this).siblings('.company-image').addClass('overlay-show');
}).mouseout(function () {
    $(this).siblings('.company-image').removeClass('overlay-show');
});