我的网站是由多个块构建的,这些块包含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是:
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”选项都在colflict中。过滤没有同时过滤:)有时它会变得平滑,有时悬停后我得到白色背景,nvm。很多浮华的效果。
我尝试的是删除“.element:hover img.grey{}”,并简单地添加jQuery脚本来切换“.grey”类onmouseover/onmouseout(hover)。我在“$('element').hover()”函数中使用了标准的“toggleClass()”。
还有我在css-tricks.com上发现的东西:
$('.element').hover(
function(){ $("img").removeClass('grey') },
function(){ $("img").addClass('grey') }
)
我认为这有助于避免“过滤:无与过渡”的冲突。但两个都没用。有人能帮我吗?
P.S.不起作用意味着没有悬停效果。悬停后动作图像保持灰度。
最佳答案
您只想在图像悬停时进行转换吗?你可以试试这个-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);
}
否则我不明白你的问题。