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

我面临的问题是，当我将鼠标悬停在菜单项周围时，悬停时要显示的图像显示在旧图像的背面。此外，显示的悬停背景图像的宽度和高度都非常小。请帮忙。谢谢

4

10 回答 10

26

如前所述，不需要 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{
   显示：无
}
.image_on, #home:hover .image_off{
   显示：块
}
于 2012-06-04T20:47:33.587 回答
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>

这是一个工作示例。快乐编码:)

于 2012-06-04T19:38:11.457 回答
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标签中。完毕。完美运行。

于 2012-06-04T19:48:19.813 回答
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>

（为方便制作页面，图像名称已更改。）

于 2012-06-04T19:38:36.317 回答
2

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

于 2012-06-04T19:12:29.627 回答
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;
}
于 2012-06-04T19:12:48.373 回答
2

你可以做 a:hover img{display:none} 这将摆脱 img, idk 关于尺寸问题 bc 你没有指定尺寸。如果我是你，我要么放弃 img 元素，将其用作元素的背景图像，然后在 :hover 上更改它。或者如果您想要 img 元素，请按照与上述相同的原则使用 clip 属性

于 2012-06-04T19:13:16.440 回答
2

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

于 2012-06-04T20:18:12.773 回答
1

你只是想做一个简单的图像翻转吗？没有看到一个可行的例子，我无法确切地知道你想要做什么，但是图像翻转很容易用 CSS sprites 做，不需要 jquery，这使得网站更加防弹。它还使您的网站响应更快，因为默认和过度状态图像是相同的图像，不需要预加载代码。

如果您需要映射图像（而不是完全换出），这可以通过背景图像、容器 div 和 png-24 图形来完成（使 png-24s 在 IE6 中工作所需的 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然后您所做的就是将图像移动到一侧以显示 :hover 状态。（代码示例位于http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_hover_nav）。您基本上是在制作一个带有容器 div 的窗口，然后只显示实际背景图像的一部分。

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

于 2012-06-04T21:22:08.647 回答
0

现在是简单的方法：

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

此 HTML 将在鼠标悬停时将图像更改为新图片，并在鼠标移出时将其转回第一张图片。

于 2019-08-27T04:49:47.200 回答