CSS悬停效果

我正在创建一个网站，并希望通过加载另一个图像/按钮，使用我在Photoshop中创建的稍微不同的颜色套装在我的按钮上添加悬停效果。CSS悬停效果

当我应用代码时什么也没有发生。

这里是我的代码：

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 2013-03-07 01:34:40

您正试图将背景图像应用于图像标签。这是行不通的，你可以使用javascript来改变src。 – Oliver 2013-03-07 01:36:21

你这样做的方式有点不合适。你在包含一个图像的元素上设置background-image属性，这个图像大概占据了你元素的整个空间。你会让自己头痛，试图解决这个问题，而不是解释为什么你会得到你的结果，我只是告诉你不要这样做，并给你一个解决方案：

摆脱div元素中的img元素。将button2类的background-image属性更改为您想要的默认图像。按原样保留.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

CSS悬停效果

回答

相关问题