Как сделать наведение изображений в css?

Ответ 1

У вас есть тег a, содержащий тег img. Это ваше нормальное состояние. Затем вы добавляете background-image в качестве состояния зависания, и оно появляется на фоне тэга a - за тегом img.

Вероятно, вы должны создать CSS-спрайт и использовать фоновые позиции, но это должно начать:

<div>
    <a href="home.html"></a>
</div>

div a {
    width:  59px;
    height: 59px;
    display: block;
    background-image: url('images/btnhome.png');
}

div a:hover {
    background-image: url('images/btnhomeh.png);
}

Этот A List Apart Article с 2004 г. по-прежнему имеет значение и даст вам некоторое представление о спрайтах и ​​почему это хорошая идея использовать вместо двух разных изображений. Это намного лучше написано, чем все, что я мог вам объяснить.

Ответ 2

Вы устанавливаете фон изображения на другое изображение. Что хорошо, но передний план (атрибут SRC для IMG) все еще накладывает все остальное.

.nkhome{
    margin-left:260px;
    top:170px;
    position:absolute;
}
.nkhome a {
    background:url(Images/btnhome.png);
    display:block; /* Necessary, since A is not a block element */
    width:59px;
    height:59px;
}
.nkhome a:hover {
    background:url(Images/btnhomeh.png);
}


<div class="nkhome">
    <a href="Home.html"></a>
</div>

Ответ 3

Просто это лишний div или JavaScript, просто чистый CSS (jsfiddle demo):

HTML

<a href="javascript:alert('Hello!')" class="changesImgOnHover">
    <img src="http://dummyimage.com/50x25/00f/ff0.png&text=Hello!" alt="Hello!">
</a>

CSS

.changesImgOnHover {
    display: inline-block; /* or just block */
    width: 50px;
    background: url('http://dummyimage.com/50x25/0f0/f00.png&text=Hello!') no-repeat;
}
.changesImgOnHover:hover img {
    visibility: hidden;
}

Ответ 4

Это не сработает, поместите оба изображения в качестве фоновых изображений:

.bg-img {
    background:url(images/yourImg.jpg) no-repeat 0 0;
}

.bg-img:hover {
    background:url(images/yourImg-1.jpg) no-repeat 0 0;
}

Ответ 5

Привет, вы должны указывать относительное положение родителя и абсолютное значение child и присваивать высоту или ширину абсолютному классу, как это показано

Css

  .nkhome{
    margin-left:260px;
    width:59px;
    height:59px;
    margin-top:170px;
    position:relative;
    z-index:0;
}
.nkhome a:hover img{
    opacity:0.0;
}
.nkhome a:hover{
  background:url('http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg');
    width:100px;
    height:100px;
    position:absolute;
    top:0;
    z-index:1;

}

HTML

 <div class="nkhome">
        <a href="Home.html"><img src="http://dummyimage.com/100/000/fff.jpg" /></a>
    </div>
​

Live demo http://jsfiddle.net/t5FEX/7/

или

<div class="nkhome">
        <a href="Home.html"><img src="http://dummyimage.com/100/000/fff.jpg" onmouseover="this.src='http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg'" 
            onmouseout="this.src='http://dummyimage.com/100/000/fff.jpg'"
            /></a>
    </div>​

Live demo http://jsfiddle.net/t5FEX/9/

Ответ 6

Вот несколько простых шагов и отличный учебник по hover - это примеры, с которыми вы можете "играть" и тестировать вживую.

http://fivera.net/simple-cool-live-examples-image-hover-css-effect/

Ответ 7

Точное решение вашей проблемы

Вы можете изменить изображение при наведении с помощью content: url ( "YOUR-IMAGE-PATH" );

Для наведения изображения используйте строку ниже в вашем css:

img:hover

и изменить изображение при наведении с помощью следующей конфигурации внутри img: hover:

img:hover{
content:url("https://www.planwallpaper.com/static/images/9-credit-1.jpg");
}

Ответ 8

Сделайте класс с этим. И сделайте 2 разных изображения с собственной шириной и высотой. Работает в ie9.

См. эту ссылку.

http://kyleschaeffer.com/development/pure-css-image-hover/

Также вы можете сделать 2 разных изображения и поместить их в имя класса self с помощью наведения на другие изображения.

См. пример.

 .myButtonLink {
              margin-top: -5px;

    display: block;
    width: 45px;
    height: 39px;
    background: url('images/home1.png') bottom;
    text-indent: -99999px;
              margin-left:-17px;

              margin-right:-17px;

              margin-bottom: -5px;

              border-radius: 3px;
              -webkit-border-radius: 3px;           
}

.myButtonLink:hover {
    margin-top:  -5px;

    display: block;
    width: 45px;
    height: 39px;
              background: url('images/home2.png') bottom;
              text-indent: -99999px;
              margin-left:-17px;

              margin-right:-17px;

              margin-bottom: -20x;

              border-radius: 3px;
              -webkit-border-radius: 3px;
}