Question

我正在尝试修改我现在拥有的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>

CSS：

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

JSFiddle：http://jsfiddle.net/davidThomas/AUzKE/8/

Answer 1

我做过与Jacob非常相似的事情，我已经改变了很多结构，但我已经用更简单/更清洁/更简单的方式完成了。{I}看看这个：

HTML：

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

CSS：

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

jQuery的：

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

使用:before psudo元素来自this question。操作类比伪元素本身更容易，这就是我使用类来制作叠加显示的原因。 jQuery兄弟选择器也使用.company-image类选择器，以确保它只获取其他相关元素。如果出于某种原因，您无法将所有图片放在单个父div中，那么您必须使用$('.company-image').not(this)选择器，谢谢Good Luck。< / p>

Here's a Fiddle

Answer 2

好的，所以我修改了你的JSFiddle。

首先，我改变了着色的方法。我将每张图片都包裹在图像后面的色彩中，并始终存在，在这种情况下，背景为鲜红色。然后通过改变图像的不透明度来实现着色图像。注意（在JSFiddle上的CSS中）我已经通过px定义了背景色调，这样你就不会在底部有点不知所措了。（还有其他方法可以做到这一点，但px解决方案很快）。

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

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

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

然后Jquery很简单。在悬停时，您将所有图像的不透明度修改为0.5，然后将您在后面上悬停的图像的不透明度专门更改为1。

$('.wrap img').mouseover(function () {
$('.wrap img').css('opacity', '0.5'); 
$(this).css('opacity', '1'); 
}).mouseout(function () {
$('.wrap img').css('opacity', '1'); 
});

JSFiddle：http://jsfiddle.net/AUzKE/713/

Answer 3

您应该使用.not(this)：

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

Fiddle

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

3 个答案: