在图像上显示颜色叠加层NOT in selector

我试图修改jQuery，我现在有哪些当前会在悬停的图像上显示颜色。在图像上显示颜色叠加层NOT in selector

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

因此，在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/

来源

2014-08-27 JordanC26

我做了一些非常类似于Jacob的事情，我在那里改变了很多结构，但我已经以更简单/更简单/更简单的方式完成了它。检查了这一点：

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。

Here's a Fiddle

来源

2014-08-27 15:59:20 OneHoopyFrood

是否有可能有叠加效果只img标签本身，而不是周围的div类？ – JordanC26 2014-10-01 09:41:34

[不使用'：before'标签]（http://stackoverflow.com/questions/5843035/does-before-not-work-on-img-elements），但你可以尝试在该链接上的技术 – OneHoopyFrood 2014-10-01 15:06:26

好吧，所以我修改了你的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/

来源

2014-08-27 15:28:33 Jacob

你应该使用.not(this)：

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

Fiddle

来源

2014-08-27 15:28:34

在图像上显示颜色叠加层NOT in selector

回答

相关问题