如何解决悬停时如何使带有链接的图像褪色
在CSS和HTML方面,我是一个菜鸟,但是到目前为止,我已经能够很好地调整我们的Wordpress网站……。只要不需要太多技术。
我有以下代码可使图像在hover
上淡出,这是我从另一个回答的问题中复制过来的:
img {
opacity: 1.0;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
img:hover {
opacity: 0.8;
transition: opacity .55s ease-in-out;
-moz-transition: opacity .55s ease-in-out;
-webkit-transition: opacity .55s ease-in-out;
}
我想要的是这种淡入淡出悬停效果仅在具有链接的图像上起作用。现在,它会影响我所有的图像,甚至没有链接的图像。
我尝试做
a.img {
opacity: 1.0;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
a.img:hover {
opacity: 0.8;
transition: opacity .55s ease-in-out;
-moz-transition: opacity .55s ease-in-out;
-webkit-transition: opacity .55s ease-in-out;
}
但是它根本不起作用。 有任何简单的方法可以解决此问题吗?
解决方法
请使用> img而不是使用a.img
所以在您的代码中
a > img{
//... your code
}
a > img:hover{
//... your code
}
,
图片是链接的子,因此CSS选择器必须为a img {...}
和a img:hover {...}
-两者之间有一个空格。 a > img {...}
和a > img:hover {...}
也是可能的(这要求它是 direct 子代)。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。