CSS сложный эффект наведения

Question

Как я могу отображать изображение или текст всякий раз, когда наводил курсор на изображение? Можете ли вы, ребята, помочь мне?

Пример:

Answer 1

я использовал его с моей собственной идеей и получить полностью удовлетворены, вы должны сделать 2 изображения, первый не-TextEd и второй с вашим текстом и Hower на них .. ... попробовать .....

<style type="text/css"> 
    .leftPan{width:200px; float:right;; margin-top:2px} 

    #c1 { 
    margin:6px; 
    border: thin solid black; 
    width: 200px; 
    height: 200px; 
    background: url(1.jpg) no-repeat; 
    display: inline-block; 
    } 
    #c1:hover { 
    background: url(2_photo.jpg) no-repeat; 
    } 

    </style> 

Answer 2

Используйте фоновое изображение на a элемента.

Вы можете контролировать, когда она видна с помощью CSS

a:hover { 
    background-image: url(url/to/img); 
} 

Как это

HTML

<nav> 
    <a href="#Räätälöity-toimitus">Räätälöity-toimitus</a> 
    <img src="http://placehold.it/200x200&text=image" alt="Räätälöity toimitus" /> 
</nav> 

CSS

nav { 
    position: relative; 
    display: inline-block; 
} 
a { 
    display: block; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    text-align: center; 
    line-height: 7; 
} 
a:hover { 
    background-image: url(http://placehold.it/50x50/E8117F/E8117F/); 
    background-repeat: no-repeat; 
    background-position: top right; 
} 

http://jsfiddle.net/UpGKf/

Answer 3

Это на самом деле совсем не сложно ... Используйте аналогичную структуру HTML, как показано ниже, и просто измените свойство отображения диапазона при наведении.

http://jsfiddle.net/kkxfk/2/

<ul> 
    <li><a href="#">Link Title<span>Link Desc.</span></a></li> 
</ul> 

Использование абсолютное позиционирование для позиционирования промежутка, где вы хотите. ul li a span { дисплей: нет; }

ul li a:hover span { 
    display: block; 
    position: absolute; 
}