Question

在“主页”页面上，我希望#banner div上有一个标识和一个菜单（整个网站会在那里）和#content" div上有一个图像。所有这些div都位于#container" div内。菜单有3个按钮。

我希望在mouseover事件中，#content div上的每个按钮显示图像都会相应更改。基本上，当悬停button1时，#content上的图片会从background.jpg更改为background1.jpg。 mouseover上的button2事件会将其更改为background2.jpg等。当按钮未悬停时，图片应恢复为原始background.jpg。

HTML：

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>E.S.T.</title>
  <link href="_css/layout.css" rel="stylesheet" type="text/css">
  <link href="SpryAssets/SpryMenuBarHorizontal.css" 
        rel="stylesheet" 
        type="text/css">
  <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
</head>

<body>
  <div id="container">
    <div id="banner">
      <div id="logo">E.S.T.</div>
       <div id="menu">
         <ul id="MenuBar1" class="MenuBarHorizontal">
           <li id="button1"><a href="bio.html">Biography</a></li>
           <li id="button2"><a href="#">Albums</a></li>
           <li id="button3"><a href="#">Links</a></li>       
         </ul>
       </div>
     </div>
   <div id="content">
     <img id="back0" src="_img/background.jpg">
     <img id="back1" src="_img/back_bio.jpg">
   </div>
 </div>

<script type="text/javascript">
  var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1,
  {
    imgDown:"SpryAssets/SpryMenuBarDownHover.gif",
    imgRight:"SpryAssets/SpryMenuBarRightHover.gif"
  });
</script>
</body>
</html>

CSS：

@charset "UTF-8";
@import url("../_fonts/Days/fontstylesheet.css");

body {
  background-color:#CCC;
  font-family:Days;
  font-size:100%;
}

#container {
  width:850px;
  max-height: 650px;
  margin: 0 auto;
  padding-left: 10px;
  padding-right: 10px;
  overflow: hidden;
  font-family: Days;
}

#logo {
  position:relative;
  font-size: 4em;
  color:white;
  float:left;
}

#menu {
  float:right;
  margin-top:40px;
}

我尝试了几种不同的东西，但我只设法改变按钮本身的背景图像。从网上搜索我认为这应该用JS完成，但我不知道该怎么做。

Answer 1

这可以完全用CSS解决，但首先让我给你一个提示：将background.jpg和background1.jpg合并为一张图片，然后更改背景位置。这样，从用户将鼠标悬停在菜单元素上到显示图片时都不会有任何延迟，并且您将有更少的文件需要跟踪。

假设我们让#button1高出100px。我们制作一张200像素高的图像，其中包含顶部的正常状态图像，以及底部的悬停图像。这称为sprite。

#button1 {
    height: 100px;
    background-image: url("background.jpg");
}

#button1:hover {
    background-position: 0 -100px;
}

这会移动背景图像，显示悬停版本。

Answer 2

为您的图片添加ID：id = idimage 您可以像这样使用jQuery：

<script type="text/javascript">
$(document).ready(function(){
    $("#MenuBar1 li").mouseover(function(){
        var id=$(this).attr('id');
        var number = id[id.length-1];
        $("#id_image").attr("src","_img/background"+number+".jpg");
    });  
});  
</script>

Answer 3

为方便起见，我将使用jQuery javascript库回答此问题。

如果我理解正确，您希望#content包含当您将鼠标悬停在菜单项上时会发生变化的图像，并且该图像应反映当前悬停的项目。

我将尝试使用data属性的方法，而不是包含身体中的每个图像。

HTML 相关部分

<ul id="MenuBar1" class="MenuBarHorizontal">
    <li id="button1" data-img="background.jpg"><a href="bio.html">Biography</a></li>
    <li id="button2" data-img="back_album.jpg"><a href="#">Albums</a></li>
    <li id="button3"><a href="#">Links</a></li>       
</ul>

<div id="content">
    <img id="back"
         src="_img/background.jpg"
         data-original="_img/background.jpg" 
         alt="e.s.t" />
</div>

<强>的JavaScript

$(document).ready(function() {
    $("#MenuBar1 li").mouseover(function() {
        $("#back").attr("src", $(this).data("img"));
    }).mouseout(function() {
        $("#back").attr("src", $("#back").data("original"));
    });
});

现在我们将原始图片路径与图片标记一起存储在data-original属性中，:hover图片的路径与菜单元素一起存储。

请参阅此Fiddle了解演示！

鼠标悬停时更改图像以获取另一个div上的按钮

3 个答案: