logo标签列表

悬停时更改图片

javascriptjqueryhtmlcss
9

我需要一个由图片组成的菜单，当有人在其周围悬停时，图片应更改。

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

我所面临的问题是，当我在菜单项周围悬停时，要显示的悬停图像会显示在旧图像后面。此外，显示的悬停背景图像宽度和高度非常小。请帮帮我。谢谢。
3
你应该考虑使用JavaScript来完成这个任务。 - Nick Rolando
@Shredder，为什么JavaScript比CSS Sprites更受欢迎？ - Sparky
你可以使用纯JavaScript编写，但使用jQuery会更容易。您将能够有效地映射您的效果、操作等等。使用CSS，您只会寻找边框黑客，但菜单和导航不仅仅是悬停图像。 - Denys Séguret
我读了一篇关于它的好文章，链接在这里：http://www.onderhond.com/blog/work/changing-html-images-on-hover/ - user379888
@Sparky672 如果使用OP的标记语言将img源替换为js事件可能会更容易。 - Nick Rolando
显示剩余5条评论
10个回答
28

如先前所述，无需使用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
这个很好用。可以添加使用的图像的宽度，以便悬停更精确！ - Valentin Vrinceanu
18

这里提供了一个使用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>

这里有一个有效的示例。祝您编码愉快 :)

4

将此代码放在闭合的body标签之前：

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

将class为home的属性放置到标签中。完成。完美运作。
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>

（为方便起见更改了图片名称。）
2
你在HTML和CSS中都调用了<img src="images/about.png" alt="logo" />，我建议删除HTML中的代码，只使用CSS的背景图片。你也不需要使用z-index。
2
你可以使用:hover img{display:none}，这将删除img，如果你没有指定大小，我不确定大小问题。如果我是你，我会放弃img元素，将其用作a元素的background-image，并在:hover时更改它。或者如果需要img元素，可以使用clip属性，遵循上述原则。
应该使用visibility: hidden而不是display: none，以保留盒子的大小，因为它的宽度和高度没有明确给出。 - Josh Allen
2

在使用 z-index 规则时，需要同时使用 position 规则。尝试在使用 z-index 的地方添加 position:relative。

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;
}
即使我指定了宽度和高度，背景仅显示在标签内部编写的文本中。 - user379888
1

你只是想制作一个简单的图像翻转效果吗？没有看到实际的工作示例，我无法确定你具体想做什么，但是使用CSS精灵可以轻松实现图像翻转效果，不需要jQuery，这样可以使网站更加牢固。它还可以使您的网站响应更快，因为默认状态和悬停状态的图像是相同的图像，无需预加载代码。

如果您需要映射图像（而不是完全交换），可以使用背景图像、容器div和png-24图形来实现（在IE6中需要JavaScript才能使png-24正常工作，但是谁还关心支持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，然后你所做的只是将图片移到一边以显示:hover状态。 (代码示例请见 http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_hover_nav)。你基本上在创建一个带有容器 div 的窗口，然后只显示实际背景图像的一部分。

另外，不要在除了 a 标签之外的块级元素上使用 :hover，因为并非所有浏览器都支持在块级元素上使用 :hover。

0

现在来介绍简单的方法：

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

这段HTML代码将在鼠标悬停时更换图片为新图片，并在鼠标移开时将其恢复为第一张图片。

将id名称更改为“this”也可以正常工作，而无需复制id。例如：onmouseover=this.src='img2.png' - Robolisk
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接