Это мой первый пост. Я все еще изучаю CSS, и ваша помощь очень ценится.
Я пытался создать Div, содержащий изображение с прозрачным наложением с полупрозрачной рамкой внизу. При наведении добавляется второе прозрачное наложение, делающее нижнюю границу темнее. Затем у меня есть еще один div, содержащий некоторый текст заголовка, текст заголовка должен менять цвет при наведении курсора в любом месте родительского Div, а также все это должно быть связано при нажатии.
Ближе всего к этому находится на Vimeo здесь:
Мне удалось добиться всего этого, и он отлично работал в IE, Firefox, сафари и т. Д. Но с 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>
). - person Sparky   schedule 03.01.2013