在悬停时更改图像

时间:2012-06-04 19:08:05

标签: javascript jquery html css

我需要一个由图像组成的菜单,当有人在它周围徘徊时,图像应该会改变。

HTML

<div id="menu" >  
    <a href="#" id="home"><img  src="images/about.png" alt="logo" /></a>
</div>

CSS

#menu {
        margin-left    : 353px;
        margin-top     : -70px;
        padding-bottom : 16px;
}

#home {
        background     : transparent url(images/about.png);
        z-index        : 1;
}

#home:hover {
        background     : url(images/aboutR.png);
        z-index        : 2;
}

我面临的问题是,当我悬停围绕菜单项时,悬停时显示的图像会在>旧图像的背面显示。此外,显示的悬停背景图像的宽度和高度非常小。请帮忙。谢谢 ![在此输入图像说明] [1]

10 个答案:

答案 0 :(得分:21)

如前所述,不需要JS解决方案。

另一种方法是加载两个图像并使用:hover事件隐藏/显示它们。像这样:

<强> HTML:

<a id="home"><img class="image_on" src="images/about.png" alt="logo" /><img class="image_off" src="images/aboutR.png" alt="logo" /></a>

<强> CSS:



.image_off, #home:hover .image_on{
   display:none
}
.image_on, #home:hover .image_off{
   display:block
}

答案 1 :(得分:15)

这是一个js / jquery解决方案

//should go inside your <head> tag
function onHover()
{
    $("#menuImg").attr('src', 'images/aboutR.png');
}

function offHover()
{
    $("#menuImg").attr('src', 'images/about.png');
}

HTML:

<div id="menu" >  
  <a href="#" id="home">
    <img id="menuImg" src="images/about.png" alt="logo" onmouseover="onHover();" 
      onmouseout="offHover();" />
  </a>
</div>

这是working example。快乐的编码:)

答案 2 :(得分:4)

将此代码放在关闭正文标记

之前
<script  type='text/javascript'>
$(document).ready(function(){
    $(".home").hover(
        function() {$(this).attr("src","images/aboutR.png");},
        function() {$(this).attr("src","images/about.png");
    });
});
</script>

将课程置于img标记中。完成。效果很好。

答案 3 :(得分:3)

这有效:

<html>
<head>
<title>Example</title>
<style type="text/css">
#menu {
    width: 400px;
    height: 142px;
    margin-left: 353px;
    margin-top: -70px;
    padding-bottom: 16px;
}

#menu:hover {
    background: url(lPr4mOr.png);
    background-repeat: no-repeat;
}
</style>
</head>
<body>
    <div id="menu">
        <a href="#" id="home"><img src="lPr4m.png" alt="logo" /></a>
    </div>
</body>
</html>

(图片名称因我方便而改变了页面。)

答案 4 :(得分:2)

您正在调用<img src="images/about.png" alt="logo" />两次,一次在html中,一次在css中。我建议删除html并严格使用css背景图片。您也不需要z-index。

答案 5 :(得分:2)

删除img标记,并将#home(以及任何其他菜单项)的宽度和高度设置为图像的宽度和高度。

此外,将内容设置为图像alt的任何内容(出于辅助目的),然后设置text-indent属性,以便将其移出页面。

目前,当您悬停时,它正在更改背景图片,但img标记位于顶部,而且始终是。

<强> HTML

<div id="menu" >  
  <a href="#" id="home">Home</a>
</div>

<强> CSS

#menu{
  margin-left: 353px;
  margin-top: -70px;
  padding-bottom: 16px;
}
#home{
  background:transparent url(images/about.png);
  width: 400px;
  height: 142px;
  z-index:1;
  text-indent: -9999em;
}
#home:hover{
  background:url(images/aboutR.png);
  z-index:2;
}

答案 6 :(得分:2)

你可以做一个:hover img {display:none}哪个会摆脱img,关于尺寸问题的idk bc你没有指定尺寸。如果我是你,我要么放弃img元素,使用它作为元素的背景图像,然后改变它:悬停。或者如果你想要img元素,请按照与上面相同的原则使用clip属性

答案 7 :(得分:2)

您需要在使用position规则时使用z-index规则。尝试在您使用position:relative的位置添加z-index

答案 8 :(得分:1)

你正试图做一个简单的图像翻转吗?没有看到一个工作示例我无法确切地知道你正在尝试做什么,但图像翻转很容易使用CSS精灵,不需要jquery,这使得一个更加防弹的网站。它还使您的网站响应更快,因为默认和过度状态图像是相同的图像,没有必要的预加载代码。

如果你需要一个映射的图像(而不是完全换出),这可以通过背景图像,容器div和png-24图形(在IE6中使png-24s工作所需的javascript,但谁在乎无论如何支持IE6?)。

更改导航图像而不诉诸javascript的好方法是使用background-position属性,如下所示:

    // define your container element
    #nav-home {  
         margin: 20px 5px;  
         height: 15px; 
         width: 40px;
          }

    // use a descendant selector to style the <a> tag
    #nav-home a { 
         background-image: url("/images/buttons-nav.gif"); 
         display: block; // THIS IS VERY IMPORTANT!!
         background-position: 0 0;  // the first number is horizontal placement, the second is vertical placement. at 0 0 it is positioned from the top left corner
         height: 15px; 
         }

    // this is where you change the position of the background for the hover state
    #nav-home a:hover { 
         background-position: -20px 0; //this moved it 20px to the right 
         }

,您的HTML代码如下所示:

    <div id="nav-home"><a href="/yourlink/"><img src="/images/transparent.gif" alt="home" height="100%" width="100%;"></a>
    <!-- uses a 1px transparent gif to "hold" the place of the actual clicked item -->

你的图像实际上包含两种状态,如下所示:http://www.w3schools.com/css/img_navsprites_hover.gif然后您所做的就是将图像移动到一侧以显示:悬停状态。 (代码示例http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_hover_nav)。你基本上是在制作一个带有容器div的窗口,然后只显示实际背景图像的一部分。

另外,远离使用:将鼠标悬停在除标记之外的任何内容上,并非所有浏览器都支持使用:悬停在块级元素上。

答案 9 :(得分:0)

现在使用简单的方法:

<img id=logo src=img1.png onmouseover=logo.src='img2.png' onmouseout=logo.src='img1.png'>

此HTML将在鼠标悬停时将图像更改为新图片,并在鼠标悬停时将其返回至第一张图片。