CSS Hover effects

Я создаю веб-сайт и хочу добавить эффект зависания на мои кнопки, загрузив другое изображение/кнопку с немного другим цветным костюмом, который я создал в Photoshop.CSS Hover effects

Когда я применяю код, ничего не происходит.

Вот мой код:

CSS:

#main{ 
    position: relative; 
    background-color:#ececec; 
    height:900px; 
    margin-top: 10px; 
    margin-left: 10px; 
    margin-right: 10px; 

} 


    #main .button2{ 

     position: absolute; 
     left:0.5%; 
     top: 71.5%; 
     z-index:20; 
     width:170px; 
     height:40px; 
    } 
    #main .button2:hover{ 
     background-image : url(images/buttBootsRollover.png); 

    }

HTML:

<div id="main"> 
<article> 


<section> 
    <a href="#index.php" > <img src="images/buttGloves.png" class="button" /></a> 
    <a href="#index.php" > <img src="images/buttBoots.png" class="button2" /></a> 
    <a href="#index.php" > <img src="images/buttEqu.png" class="button3" /></a> 
</section> 

</article>

Вот картинка, которая может дать более полное представление: enter image description here

В конце концов я хотите добавить тот же эффект наведения на все 9 кнопок

источник

2013-03-07 Tomazi

Не путайте фоновые изображения с элементами 'img'. – kapa

Вы пытаетесь применить фоновое изображение к тегу изображения. Это не сработает, вы можете использовать javascript для изменения src. – Oliver

То, как вы это делаете, немного не работает. Вы устанавливаете свойство background-image на элементе, который содержит изображение, которое (предположительно) занимает все пространство вашего элемента. У вас будет головная боль, пытающаяся работать с этим, поэтому вместо того, чтобы объяснять, почему вы получаете результат, я просто скажу вам, чтобы вы не делали этого так и не дали вам решения:

Избавьтесь от элементов img внутри ваших элементов div. Измените свойство background-image вашего класса button2 на изображение, которое вы хотите по умолчанию. Оставьте свой .button2: свойство hover как есть.

источник

2013-03-07 01:37:40 2to1mux

Это то, что вы ищете. но я уверен, что вы не пытались в Google по крайней мере. Я рекомендую вам сначала выполнить простой учебник по CSS.

#main{ 
    background-color:#ececec; 
    height:500px; 
    width: 600px; 
    margin:0px auto; 
} 
.button{    
     z-index:1000; 
     width:170px; 
     height:40px;   
     display:block; 
     background-repeat:no-repeat; 
} 
#but_one{ 
    background-image : url(images/but_one.png); 
} 
#but_two{ 
    background-image : url(images/but_two.png); 
} 
#but_three{ 
    background-image : url(images/but_three.png); 
} 
#but_one:hover{ 
    background-image : url(images/but_one_h.png); 
} 
#but_two:hover{ 
    background-image : url(images/but_two_h.png); 
} 
#but_three:hover{ 
    background-image : url(images/but_three_h.png); 
}

<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <link rel="stylesheet" type="text/css" href="main.css" /> 
     <title>hi css</title> 
    </head> 
    <body> 
    <div id="main"> 
    <a href="index.php" ><img id="but_one" class="button" /></a> 
    <a href="index.php" ><img id="but_two" class="button" /></a> 
    <a href="index.php" ><img id="but_three" class="button" /></a> 
    <div> 
    </body> 
</html>

источник

2013-03-07 01:49:04

возможно добиться того, что вы хотите, вам нужна помощь jquery

<div class="box"> 
    <a href="#index.php" > <img src="images/buttGloves.png" class="button" /></a> 
    <div class="overlay">play me!</div> 
</div> 

<div class="box"> 
    <a href="#index.php" > <img src="images/buttBoots.png" class="button2" /></a> 
<div class="overlay">play me!</div> 
</div> 

<div class="box"> 
    <a href="#index.php" > <img src="images/buttEqu.png" class="button3" /></a> 
<div class="overlay">play me!</div> 
</div>

Jquery

$(function(){ 
    $(".box").hover(function(){ 
     $(this).find(".overlay").fadeIn(); 
    } 
        ,function(){ 
         $(this).find(".overlay").fadeOut(); 
        } 
        );   
});

Рабочая demo

источник

2013-03-07 02:13:27 jhunlio

Просто сделайте одно фоновое изображение и спрячьте его.

Например - удвоиться, как показано здесь http://jsfiddle.net/edheal/Qb7YG

Вот код

CSS:

#wibble 
{ 
    background-image: url(http://well-spun.co.uk/portfolio/technologies/images/rollover.png); 
    background-position: left top; 
    background-repeat: no-repeat; 
    height: 14px; 
    width: 200px; 
} 

#wibble:hover 
{ 
    background-position: left -14px; 
}

HTML:

<div id="wibble"> 
</div>

Изображение 28px высоко - просто показать верхнюю или нижнюю половину в зависимости от того, ,

источник

2013-03-07 02:32:39

ответ

Смежные вопросы