CSS: ссылка на изображение, изменение на паре

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

В настоящее время я использую этот код:

<a href="#" onclick="location.href='http://twitter.com/me'; return false;" title="Twitter link">
<div id="twitterbird" class="sidebar-poster"></div></a>

div.sidebar-poster {
margin-bottom: 10px;
background-position: center top;
background-repeat: no-repeat;
width: 160px;
}
#twitterbird {
background-image: url('twitterbird.png');
}
#twitterbird:hover {
background-image: url('twitterbird_hover.png');
}

Но у меня много проблем: div не подбирает правила CSS (элемент просто не показывает связанные правила CSS, когда я просматриваю его в Firebug).

Возможно, это потому, что (как я знаю) это недопустимый HTML: вы не можете поместить <a> вокруг a <div>. Однако, если я переключусь на <span>, то кажется, что у меня возникают большие проблемы, потому что вы не можете установить высоту и ширину на расстоянии надежно.

Помощь! Как я могу сделать это лучше?

Ответ 1

 <a href="http://twitter.com/me" class="twitterbird" title="Twitter link"></a>

используйте класс для самой ссылки и забудьте div

.twitterbird {
 margin-bottom: 10px;
 width: 160px;
 height:160px;
 display:block;
 background:transparent url('twitterbird.png') center top no-repeat;
}

.twitterbird:hover {
   background-image: url('twitterbird_hover.png');
}

Ответ 2

Если у вас есть только несколько мест, где вы хотите создать этот эффект, вы можете использовать следующий HTML-код, который не требует css. Просто вставьте его.

<a href="TARGET URL GOES HERE"><img src="URL OF FIRST IMAGE GOES HERE" 
onmouseover="this.src='URL OF IMAGE ON HOVER GOES HERE'"
onmouseout="this.src='URL OF FIRST IMAGE GOES HERE AGAIN'" /></A>

Обязательно напишите кавычки точно так, как они есть здесь, или они не будут работать.

Ответ 3

Это можно сделать только с помощью <a>:

#twitterbird {
 display: block; /* 'convert' <a> to <div> */
 margin-bottom: 10px;
 background-position: center top;
 background-repeat: no-repeat;
 width: 160px;
 height: 160px;
 background-image: url('twitterbird.png');
}
#twitterbird:hover {
 background-image: url('twitterbird_hover.png');
}

Ответ 4

Лучше, если вы установите элемент таким образом

display:block;

а затем css спрайты установите ваш фоновый фон

Изменить: проверьте этот пример http://jsfiddle.net/steweb/dTwtk/

Ответ 5

Вы можете сделать следующее, не требуя CSS...

<a href="ENTER_DESTINATION_URL"><img src="URL_OF_FIRST_IMAGE_SOURCE" onmouseover="this.src='URL_OF_SECOND_IMAGE_SOURCE'" onmouseout="this.src='URL_OF_FIRST_IMAGE_SOURCE_AGAIN'" /></a>

Пример: https://jsfiddle.net/jord8on/k1zsfqyk/

Это решение было СОВЕРШЕННО для моих нужд! Я нашел это решение здесь.

Отказ от ответственности. Решение, которое возможно без CSS, важно для меня, потому что я проектирую контент на платформе сообщества Jive-x, которая не дает нам доступа к глобальному CSS.

Ответ 6

Проблема с изменением его с помощью JavaScript или CSS заключается в том, что если у вас медленное соединение, изображение займет секунду, чтобы перейти на зависающую версию. Это приведет к нежелательной вспышке, поскольку она исчезнет, а другая загрузка.

То, что я делал раньше, имеет два изображения. Затем скройте и покажите каждый в зависимости от состояния зависания. Это позволит установить чистый переключатель между двумя изображениями.

<a href="/settings">
    <img class="default" src="settings-default.svg"/>
    <img class="hover" src="settings-hover.svg"/>
    <span>Settings</span>
</a>

a img.hover {
    display: none;
}
a img.default {
    display: inherit;
}
a:hover img.hover {
    display: inherit;
}
a:hover img.default {
    display: none;
}

Ответ 7

Если вы дадите в целом значение span свойства display:block, оно будет вести себя как a div, то есть вы можете установить ширину и высоту.

Вы также можете пропустить div или span и просто установить a на display: block и применить к нему стиль backgound.

<a href="" class="myImage"><!----></a>


    <style>
      .myImage {display: block; width: 160px; height: 20px; margin:0 0 10px 0; background: url(image.png) center top no-repeat;}
.myImage:hover{background-image(image_hover.png);}
    </style>

Ответ 8

<!DOCTYPE html>
<html lang="en">
<head>
<title>Change Image on Hover in CSS</title>
<style type="text/css">
    .card {
        width: 130px;
        height: 195px;
        background: url("../images/pic.jpg") no-repeat;
        margin: 50px;
    }
    .card:hover {
        background: url("../images/anotherpic.jpg") no-repeat;
    }
</style>
</head>
<body>
    <div class="card"></div>
</body>
</html>