CSS on hover показать содержимое

Я пинаю себя здесь, как я это делал много раз, но по какой-то причине мой код не работает, и я не могу тренироваться, почему. Я смотрел на него какое-то время, так что, вероятно, это не поможет. Во всяком случае, я пытаюсь сделать CSS на hover. Поэтому, когда вы наводите курсор на div, он отображает другой div.CSS on hover показать содержимое

HTML

<div class="pressListItem"> 
    <img src="" width="" height=""> 
    <h3>July 2013</h3> 
</div> 
<div class="pressItemHover"> 
    <p>This is come more content, lalala here is a little snippet</p> 
    <span></span> 
    <span>Read more</span> 
</div>

CSS

Я использую переход непрозрачности, как я хочу его исчезать.

.pressItemHover{ 
    opacity: 0; 
    transition: opacity 0.5s linear 0s; 
    visibility: hidden; 
} 

.pressListItem:hover .pressItemHover{ 
    opacity: 1; 
    visibility: visible; 
} 

.pressListItem{ 
    width: 200px; 
    float: left; 
    height: 200px; 
    margin-right:12px; 
    text-align: center; 
    border: solid 1px #e4e4e4;  
}

Если кто-то может указать на то, что я m делать неправильно, это было бы очень признательно!

источник

2013-10-04 JDavies

Изменить селектор:

.pressListItem:hover + .pressItemHover { 
    opacity: 1; 
    visibility: visible; 
}

jsFiddle example

.pressListItem:hover .pressItemHover ищет элемент с классом pressItemHover, который является потомком pressListItem, когда в действительности это родной брат, в этом случае вы хотите использовать соседний селектор для брака +.

источник

2013-10-04 18:28:17 j08691

1+ Это работает, но это действительно Glitchy .. Он мерцает - в Chrome anyways –

Прекрасное спасибо! Я даже попытался использовать>, но +, похоже, сделал трюк! Спасибо!! – JDavies

@JoshC ok спасибо, я сделаю некоторое тестирование, возможно, нужно сыграть с CSS – JDavies

В вашем HTML .pressListItem и .pressItemHover являются siblings. В вашем CSS вы определяете стили для div, который является ребенком из .pressListItem. Вы должны изменить HTML для этого

<div class="pressListItem"> 
    <img src="" width="" height=""> 
    <h3>July 2013</h3> 

    <div class="pressItemHover"> 
     <p>This is come more content, lalala here is a little snippet</p> 
     <span></span> 
     <span>Read more</span> 
    </div> 
</div>

или если вы не wan't реструктурировать свой DOM, вы можете просто изменить эту часть CSS

.pressListItem:hover + .pressItemHover {

источник

2013-10-04 18:29:05 matewka

CSS on hover показать содержимое

ответ

Смежные вопросы