Изображение при наведении на ссылки - PullRequest
Новая
       27

Изображение при наведении на ссылки

4 голосов
/ 30 марта 2012

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

Ответы [ 4 ]

4 голосов
/ 30 марта 2012

вы можете создать 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

1 голос
/ 30 марта 2012

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

Ваша разметка будет выглядеть примерно так: 

<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 */
   }

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

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

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

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

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

1 голос
/ 30 марта 2012

Другой способ сделать это с помощью дисплея: нет / блок 

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>
0 голосов
/ 30 марта 2012

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

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>
...