类在悬停上的更改: CSS与jQuery (过渡glich)
类在悬停上的更改: CSS与jQuery (过渡glich)
提问于 2015-05-09 10:52:32
我的站点是使用多个块构建的，这些块包含IMG、TITLE + TEXT，如下所示(它们在3列中)：
<div class="element">
<img class="responsive grey" src="img_src" />
<article>
<h1>title</h1>
<p>text</p>
</article>
</div>用于".grey“的css (我希望使用transition)是：
img.grey {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");
/* here should go transition */
}加上div上的操作:悬停是：
.element:hover img.grey {
-webkit-filter: none;
filter: none;
/* here should go transition */
}如你所见，将鼠标指向整个DIV只会触发IMG的悬停动作。
问题是，当我将转换添加到"img.grey“和".element:hover img.grey”时，因为我希望它能顺利地改变，效果会变得有点混乱。我想这是因为"filter: none“和"transition: transition_options;”都在colflict中。过滤与无过滤器同时:)有时它变得平滑，有时悬停后我得到白色背景，nvm。许多浮躁的效果。
我尝试的是删除".element:hover img.grey {}“，并简单地添加将切换".grey”类onmouseover / onmouseout (悬停)的jQuery脚本。我在"$('element').hover()“函数中使用了标准的”.hover()“。
另外，我在css-tics.com上也发现了一些东西：
$('.element').hover(
function(){ $("img").removeClass('grey') },
function(){ $("img").addClass('grey') }
)我认为这可以帮助我避免“过滤器:无与过渡”的冲突。但这两种方法都没有用。有人能帮我吗？
不起作用意味着没有悬停效应。悬停后，图像停留在灰度上。
回答 1
Stack Overflow用户
发布于 2015-05-10 20:16:15
您是否只想在图像悬停时进行转换？然后你可以试试这个- http://codepen.io/sergdenisov/pen/GJoyNz。
img {
width: 300px;
height: 300px;
}
img#lena-desaturate {
-webkit-filter: grayscale(1);
-webkit-filter: grayscale(100%);
filter: gray;
filter: url(#greyscale);
filter: grayscale(100%);
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
img#lena-desaturate:hover {
-webkit-filter: grayscale(0);
filter: none;
filter: grayscale(0);
}否则我就不明白你的问题了。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30139040
复制相关文章
相似问题
腾讯云开发者
