Изображение hover, чтобы показать ссылки

Question

, поэтому у меня есть div, который будет содержать изображение http://www.reversl.net/hovers/, и я хотел бы, чтобы изображение отображало две ссылки, когда они зависали, как показано в макете, приведенном здесь. http://www.reversl.net/demo/ Можно ли достичь этого, используя только css?

Answer 1

Другим способом вы могли бы сделать это с дисплеем: нет/блок

div.container { width: 200px; height: 200px; position: relative; } 
div.container img { width: 100%; height: 100%; position: absolute; top: 0; } 
div.container div { width: 100%; position: absolute; top: 0; display: none; } 
div.container img:hover + div { display: block; } 
div.container div:hover { display: block; } 

<div class="container"> 
<img src="an_img.jpg"> 
<div> <a href="a link">A link should be here</a> </div> 
</div> 

Answer 2

вы можете создать DIV со ссылками и в CSS:

div.myimage div.links { display:none;} 
div.myimage:hover div.links { display:block;} 

образец HTML:

<div class="myimage"> 
    <div class="links"> we are the links</div> 
    <img src="animage.png" /> 
</div> 

, очевидно, вы должны установить сами DIV позиционирования

Answer 3

если вы хотите, чтобы парить над только изображение:

div.container { width: 200px; height: 200px; position: relative; } 
div.container img { width: 100%; height: 100%; position: absolute; top: 0; } 
div.container img:hover { z-index: -1; } 
div.container div { width: 100%; position: absolute; top: 0; } 
div.container div:hover { z-index: 1; } 

(последняя необходим для устранения мерцания при наведении курсора на ссылки)

<div class="container"> 
<div> <a href="">A link should be here</a> </div> 
<img src="an_img.jpg"> 
</div> 

Answer 4

Вы всегда можете использовать «непрозрачность» ,

Ваша разметка будет что-то вроде этого:

<div class="wrapper"> 
    <img src="example.png" alt="example" /> 
    <ul class="links"> 
    <li><a href="">Example Link</a></li> 
    <li><a href="">Example Link</a></li> 
    </ul> 
    </div> 

Тогда в CSS:

.wrapper { 
    position: relative; /*so the absolute positioning works */ 
    } 

.links { 
    position: absolute; 
    top: 0; 
    left: 0; 
    opacity: 0; /*hidden by default */ 
    width: 100%; 
    height: 25px; /*making this up */ 
    } 

    .wrapper:hover .links, .wrapper:focus .links { 
    opacity: 1; /*visible on hover */ 
    } 

пару предостережений к этой технике:

• Вам нужно будет использовать opacity filter для IE8 и ниже, поскольку они не понимают свойство CSS непрозрачности
• Я бы не рекомендовал эту технику для навигации, как вы, кажется, намереваетесь. Пользователи на сенсорных устройствах (смартфоны и планшеты) на самом деле не имеют «зависающего» состояния.

Если вы хотите, чтобы некоторые бонусные очки, хотя, для пользователей с современными браузерами, добавить следующее:

.links { 
    -webkit-transition: all .3s ease; 
    -moz-transition: all .3s ease; 
    -o-transition: all .3s ease; 
    transition: all .3s ease; 
    } 

И ссылки будут «исчезать» в - все с помощью CSS.