Нужен эффект CSS при наведении курсора на изображение, чтобы получить другое изображение и / или текст для отображения над ним - PullRequest
Новая
       5

Нужен эффект CSS при наведении курсора на изображение, чтобы получить другое изображение и / или текст для отображения над ним

2 голосов
/ 24 января 2012

У меня есть 10 флагов стран на веб-сайте моей компании (VS 2010 / vb / asp.net4.0).Если щелкнуть флаг, веб-сайт будет отображаться на языке этой страны для всей сессии.

Мне бы хотелось, чтобы, когда клиент наводит курсор на флаг, у него было мини-изображение этой страны hover.выше и справа от флага.Поэтому, когда они нажимают на немецкий флаг, появляется мини-карта Германии в в верхнем правом углу - и я буду z-индексировать ее, чтобы она находилась над строкой таблицы над ней - и, кроме того,на изображении будет что-то вроде «Deutch» или «Просмотреть этот сайт на немецком» (на немецком, конечно). 

                   **Images of countries here when hovering**
       Flag1  Flag2  Flag3  Flag4  Flag5  Flag6  Flag7  Flag8

Для таких, как я, кто не очень хорош в CSS, этоэто возможно, и если да, то как мне это сделать?Любое руководство будет с благодарностью!

Ответы [ 5 ]

4 голосов
/ 24 января 2012

предположим, что вы используете список 

<a class="flagbutton">
  <img src="/flag1"/>
  <img class="map" src="/flag1map"/>
</a>
<a class="flagbutton">
  <img src="/flag1"/>
  <img class="map" src="/flag1map"/>
</a>
<a class="flagbutton">
  <img src="/flag1"/>
  <img class="map" src="/flag1map"/>
</a>

.map{
display:none;
}
a.flagbutton:hover .map{
display:block;
}

Вы можете добавить дополнительные CSS, чтобы выполнить позиционирование в бите .map!

2 голосов
/ 24 января 2012

Это довольно просто сделать только с помощью CSS, Javascript вообще не требуется.Есть много деталей, но основной шаблон - поместить ваши изображения в тот же элемент, что и флаг.Давайте назовем это .flag.Установите изображения страны на display:none;.Затем установите .flag:hover img на display:block;.Это заставит изображение появляться только при наведении на флаг.

Вам необходимо установить положение элемента флага на относительное, а положение изображения страны на абсолютное.Это позволит вам установить верхнюю и правую позиции изображения там, где вы хотите.

1 голос
/ 24 января 2012

Я создал скрипку для вас - http://jsfiddle.net/UHZzJ/

Вы также можете заменить список на <div> или ваши структурные требования.Строка с надписью «Просмотр этого веб-сайта на немецком языке» должна находиться в подразделе рядом со ссылкой и быть абсолютно позиционированной к родительскому элементу <div>.

Забыл добавить, li:hover не будетработать в IE6.Только a:hover разрешено.В этом случае вам нужно поместить div в <a> (установка display:block).Если вы открыты для JQuery, есть более элегантные решения - http://flowplayer.org/tools/tooltip/index.html, http://craigsworks.com/projects/qtip/

1 голос
/ 24 января 2012

Вы можете сделать это в CSS, но если вам нужна анимация, вам нужен JS.Вот код для одного без анимов.

HTML 

</ul>
   <li class="item">
      <img src="flag.jpg" />
      <img src="pic.jpg" class="pic" />
   </li>
   <li class="item">
      <img src="flag.jpg" />
      <img src="pic.jpg" class="pic" />
   </li>
   <li class="item">
      <img src="flag.jpg" />
      <img src="pic.jpg" class="pic" />
   </li>
.
.
.
</ul>

CSS 

.item {
   position:relative; /*Needed for pos:absolute below*/
}
.pic {
   display:none;
}
.item:hover pic {
   display:block;
   position:absolute;
   top:-20px;
}
1 голос
/ 24 января 2012

Я бы порекомендовал использовать jquery, поскольку это позволит вам отображать изображение / текст при наведении курсора.CSS будет использоваться для позиционирования и форматирования изображения или текста.

Вот хорошая ссылка для начала.

http://api.jquery.com/mouseover/

...