这是我的第一篇文章。我还在学习CSS,非常感谢您的帮助。
我一直在尝试创建一个包含图像、半透明边框和透明覆盖层的Div。当鼠标悬停时,会添加第二个透明覆盖层,使底部边框变暗。然后我有另一个Div包含一些标题文本,标题文本应该在父Div中任何地方悬停时改变颜色,并且整个内容被单击链接。
最接近的东西在Vimeo上可以看到: 我已经成功实现了这一点,并且在IE、Firefox和Safari等浏览器中都可以正常工作。但是在IE10中,文本不再在悬停时改变颜色,也不能单击div。
以下是我的CSS:
任何关于我做错的建议都非常欢迎。
我一直在尝试创建一个包含图像、半透明边框和透明覆盖层的Div。当鼠标悬停时,会添加第二个透明覆盖层,使底部边框变暗。然后我有另一个Div包含一些标题文本,标题文本应该在父Div中任何地方悬停时改变颜色,并且整个内容被单击链接。
最接近的东西在Vimeo上可以看到: 我已经成功实现了这一点,并且在IE、Firefox和Safari等浏览器中都可以正常工作。但是在IE10中,文本不再在悬停时改变颜色,也不能单击div。
以下是我的CSS:
.videoCatThumbImg {
position:relative;
background:#FFFFFF;
width: 178px;
height: 178px;
padding: 5px 5px 5px 5px;
margin: 10px 0px 0px 0px;
border: 1px solid #CCCCCC;
line-height:normal;
float:left;
}
.videoCatTskin {
position: absolute; top: 5px; left: 5px;
}
.videoCatThumbHover {
position: absolute; top: 5px; left: 5px; display: none;
}
.videoCatThumbImg:hover .videoCatThumbHover{
display: block;
}
.videoCatTitle {
position:absolute;
top:5px; left:5px;
display:block;
width:173px;
height:26px;
padding:152px 0px 0px 5px;
Font-size:18px;
font-weight:bold;
color: #ffffff;
}
.videoCatTitle:hover {
color: #5798ca;
}
这是我的HTML代码:
<div class="videoCatThumbImg">
<img src="http://www.mydomain.com/images/vcat/image_thumb.gif" alt=""/>
<img class="videoCatTskin" src="http://www.mydomain.com/images/vcat/thumb_hover.png" alt=""/>
<img class="videoCatThumbHover" src="http://www.mydomain.com/images/vcat/thumb_hover.png" alt=""/>
<a href="http://www.mydomain.com/category/356"><div class="videoCatTitle">Some Text Here</div></a>
</div>
任何关于我做错的建议都非常欢迎。
<div>
)放在内联元素(<a>
)中。 - Sparky