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

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

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

<a href="http://twitter.com/me" 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> тогда, кажется, я получаю большие проблемы, потому что вы не можете установить высоту и ширину на пролете надежно.

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

8 61
html css

8 ответов:

 <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');
}
118

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

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

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

39

Это можно сделать с помощью <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');
}
6

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

display:block;

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

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

4

проблема с изменением его с помощью 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;
}
4

вы можете сделать следующее, без необходимости 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 cloud community, которая не дает нам доступа к глобальным стиль CSS.

3

если вы даете вообще дать span свойства display:block, он будет вести себя как 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>
0
<!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>
0