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

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

1 голос
/ 08 мая 2011

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

Попытка отображения моего класса redtext на обратной косой черте в ссылке с эффектом ролловера.

Есть ли способ обойти это или лучший способ достичь этого? Ссылка в вопросе фотографии

CSS 

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ 
position: absolute;

left: -1000px;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ 
border-width: 0;
padding: 0px;
}

.thumbnail:hover span
visibility: visible;
top: -25px;
left: -125px; 

}

А вот HTML, который я изо всех сил пытаюсь заставить работать 

<a class="thumbnail" href="#accordion"><h3><span class="redtext">/</span> yaya Photography</h3><span><img src="images/yaya/yayathumb.png" /></span></a>

Заранее спасибо!

1 Ответ

1 голос
/ 08 мая 2011

Ваша проблема в том, что ваши стили на span также влияют на диапазон class="redtext".

Простой способ исправить это: вы можете избавиться от span вокруг imgа затем измените ссылки на span в вашем CSS на ссылку img.

...