CSS Наведение не работает правильно

Question

У меня есть некоторые проблемы с наведением CSS, что я делаю неправильно?

Я пытаюсь достичь этого, когда я навешиваю изображение, прозрачный div со ссылкой в ​​нем покрывает его, чтобы вы могли щелкнуть по нему и перейти на другую страницу. Что-то похожее на эту страницу http://sputniknews.com/ при наведении курсора на новости

Когда я наводил курсор на изображение, тег не отображается и не отображается корректно. Штуки с этим изменился код много раз, не знает, что делать

.cvr:hover { 
 
    background-color: rgba(0, 0, 0, 0.600); 
 
    height: inherit; 
 
    width: inherit; 
 
    float: left; 
 
    position: absolute; 
 
    left: 0px; 
 
    top: 0px; 
 
    visibility: visible; 
 
} 
 
.link { 
 
    word-break: normal; 
 
    word-wrap: break-word; 
 
    display: block; 
 
    height: inherit; 
 
    width: inherit; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    color: aliceblue; 
 
    visibility: hidden; 
 
} 
 
.cvr:hover>.link { 
 
    visibility: visible; 
 
} 
 
.img { 
 
    width: inherit; 
 
    height: inherit; 
 
} 
 
.clear { 
 
    clear: both; 
 
}

<div class="person"> 
 
    <img class="img" src="http://www.gene-quantification.de/logo-img-cz.png"> 
 
    <div class="cvr"> 
 
    <a class="link" href="#"> link text is here</a> 
 
    </div> 
 
</div> 
 
<div class="person"> 
 
    <img class="img" src="http://www.gene-quantification.de/logo-img-cz.png"> 
 
    <div class="cvr"> 
 
    <a class="link" href="#"> link text is here</a> 
 
    </div> 
 
</div> 
 
<div class="clear"></div>

Answer 1

Вы должны применить :hover псевдо-селектор родителю элемента, который вы хотели бы иметь появляются в этом состоянии.

В настоящее время вы применили его к .cvr, вам необходимо объявить это правило для элемента, содержащего родительский элемент; который составляет .person.

.cvr { 
 
    background-color: rgba(0, 0, 0, 0.600); 
 
    height: 100%; 
 
    width: inherit; 
 
    float: left; 
 
    position: absolute; 
 
    left: 0px; 
 
    transition: .7s; 
 
    right: 0px; 
 
    opacity: 0; 
 
    bottom: -500px; 
 
    visibility: visible; 
 
} 
 
.link { 
 
    word-break: normal; 
 
    word-wrap: break-word; 
 
    display: block; 
 
    height: inherit; 
 
    width: inherit; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    color: aliceblue; 
 
} 
 
.img { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 
.clear { 
 
    clear: both; 
 
} 
 
.person:hover .cvr { 
 
    bottom: 0px; 
 
    opacity: 1; 
 
} 
 
.person { 
 
    display: inline-block; 
 
    position: relative; 
 
    overflow: hidden; 
 
    height: auto; 
 
}

<div class="person"> 
 
    <img class="img" src="http://www.gene-quantification.de/logo-img-cz.png"> 
 
    <div class="cvr"> 
 
    <a class="link" href="#"> link text is here</a> 
 
    </div> 
 
</div> 
 
<div class="person"> 
 
    <img class="img" src="http://www.gene-quantification.de/logo-img-cz.png"> 
 
    <div class="cvr"> 
 
    <a class="link" href="#"> link text is here</a> 
 
    </div> 
 
</div> 
 
<div class="clear"></div>

Answer 2

Там кратный путь для достижения этой цели. Я предлагаю вам использовать позицию относительно вашего контейнера и положение абсолютное в контейнере ссылок. Вы можете использовать RGBA цвет, чтобы играть с непрозрачностью тоже:

background-color: rgba(0,0,0,0); 

Первые три значения представляют собой код цвета RGB и последняя представляет непрозрачность от 0 до 1.

Я немного изменил ты так HTML что вы класс, более репрезентативны для их функции. Вот демо: https://jsfiddle.net/ecpb6tre

Answer 3

То, что вы хотите сделать, это добавить следующее:

.cvr { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
} 

Затем добавьте:

.person { 
    position: relative; 
} 

Причина это работает в том, что абсолютное позиционирование по отношению к элементам первый родитель, у которого есть явно выраженный атрибут позиции. Поскольку класс .person не имеет объявленной позиции, позиция position: absolute на дочернем элементе предполагает, что вы хотите расположить его относительно страницы.

Answer 4

Пожалуйста, попробуйте этот код, и он работает.

<style> 
.person { position:relative; width:50%; } 
.person .cvr { display:none; background-color: rgba(0, 0, 0, 0.600); height: 100%; width: 100%; position: absolute; left: 0px; top: 0px; visibility: visible; } 
.person:hover .cvr { display:block; } 
.person img { width:100%; } 
.person .textdiv { display:table; height: 100%; width: 100%; } 
.person .cvr a { display: table-cell; text-align: center; text-decoration: none; color: aliceblue; vertical-align: middle; } 
</style> 

<div class="person"> 
    <img class="img" src="http://www.gene-quantification.de/logo-img-cz.png"> 
    <div class="cvr"> 
    <div class="textdiv"><a class="link" href="#"> link text is here</a></div> 
    </div> 
</div> 

<div class="person"> 
    <img class="img" src="http://www.gene-quantification.de/logo-img-cz.png"> 
    <div class="cvr"> 
    <div class="textdiv"><a class="link" href="#"> link text is here</a></div> 
    </div> 
</div>