Правила Div Hover не работают в IE10

Это мой первый пост. Я все еще изучаю CSS, и ваша помощь очень ценится.

Я пытался создать Div, содержащий изображение с прозрачным наложением с полупрозрачной рамкой внизу. При наведении добавляется второе прозрачное наложение, делающее нижнюю границу темнее. Затем у меня есть еще один div, содержащий некоторый текст заголовка, текст заголовка должен менять цвет при наведении курсора в любом месте родительского Div, а также все это должно быть связано при нажатии.

Ближе всего к этому находится на Vimeo здесь:

http://vimeo.com/categories

Мне удалось добиться всего этого, и он отлично работал в 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>

Любые советы о том, что я делаю неправильно, очень приветствуются.


person Ruf1    schedule 03.01.2013    source источник
comment
Обычно вы не размещаете элемент блочного уровня (<div>) внутри встроенного элемента (<a>).   -  person Sparky    schedule 03.01.2013
comment
Я знаю, что вы ищете конкретное решение для CSS, но я бы посоветовал вам использовать подход jQuery. Скройте div с текстом и используйте jQuery, чтобы показать/скрыть текстовый элемент (с непрозрачностью).   -  person Lowkase    schedule 03.01.2013
comment
Не могли бы вы опубликовать скрипку о проблеме?   -  person Nick    schedule 05.01.2013


Ответы (2)


Как и в этом ответе, попробуйте добавить фон (прозрачное изображение или тот же цвет будет работать), к классам наведения, у которых его нет (.videoCatThumbImg:hover).

person Jason    schedule 03.01.2013
comment
привет Lokasi - я пытался добавить цвет фона, но это не сработало. Привет Спарки. Как бы мне добиться того же без элемента div? - person Ruf1; 03.01.2013

Просто была проблема. Ни одно из решений не работало (граница, фон, hasLayout).

В конце концов, я переключился на тип документа XHTML 1 Strict, и это сработало, если это может помочь...

person Savageman    schedule 17.04.2013