Fatal编程技术网
  • html/
  • Html CSS悬停效果

Html CSS悬停效果

html css

Html CSS悬停效果,html,css,hover,effects,Html,Css,Hover,Effects,我正在创建一个网站，希望通过加载另一个与我在Photoshop中创建的颜色稍有不同的图像/按钮，在我的按钮上添加悬停效果 当我应用代码时，什么也没发生 这是我的密码： CSS: HTML: 下面的图片可以提供更好的概述： 最后，我想在所有9个按钮上添加相同的悬停效果，您这样做有点不太合适。您正在对包含图像的元素设置background image属性，该图像可能会占用元素的整个空间。如果你想解决这个问题，你会感到头疼，所以与其解释为什么你会得到这样的结果，我只想告诉你不要那样做，并给你一个

我正在创建一个网站，希望通过加载另一个与我在Photoshop中创建的颜色稍有不同的图像/按钮，在我的按钮上添加悬停效果

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

这是我的密码：

CSS:

HTML:
下面的图片可以提供更好的概述：

最后，我想在所有9个按钮上添加相同的悬停效果，您这样做有点不太合适。您正在对包含图像的元素设置background image属性，该图像可能会占用元素的整个空间。如果你想解决这个问题，你会感到头疼，所以与其解释为什么你会得到这样的结果，我只想告诉你不要那样做，并给你一个解决方案：

去掉div元素中的img元素。将button2类的“背景图像”属性更改为要作为默认值的图像。保持.button2:hover属性不变。

这就是您要查找的内容。但我相信你至少还没有在谷歌尝试过。我建议您先学习一个简单的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);
} 


嗨，css

也许要实现您想要的，您需要
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>



工作
只需有一个背景图像并隐藏一点即可

例如，如这里所示，加倍

这是密码

CSS:

HTML:






图像为28px高-仅显示上半部分或下半部分，具体取决于它是否悬停。
不要将背景图像与
img
元素混淆。您正在尝试将背景图像应用于图像标记。这将不起作用，您可以使用javascript来更改src。

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



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



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



#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;
}



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