Question

我正在尝试制作一个像大型菜单这样的菜单，但没有什么对我有用，我正在粘贴我的代码以获得简单的结果。

我有两个div，一个用于图像，一个用于菜单。在其他div中的悬停链接图像应该改变。 CSS或JS对我来说没问题。

HTML =====

<div>

    <div id="img_div"></div>
    <div id="links_div">
        <ul>
            <li><a href="">Show image 1</a></li>
            <li><a href="">Show image 2</a></li>
            <li><a href="">Show image 3</a></li>
            <li><a href="">Show image 4</a></li>
            <li><a href="">Show image 5</a></li>
        </ul>
    </div>
</div>

CSS ==

<style>
 #img_div{
    height: 200px;
    width: 200px;
    background: url("images/default.jpg");
    float: left;
}
 #links_div{
    float: left;
    height: 200px;
    width: 200px;
}
ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
}
ul li{
    display: block;
}
ul li a{
}
</style>

Answer 1

我已经使用点击创建了一个代码示例，如果您正在寻找，请告诉我。我猜你可以替换＆＃34;点击＆＃34;与＆＃34;悬停＆＃34;如果我正确理解你的问题。

更新：捕获鼠标事件而非点击

＆＃13;

$(document).ready(function() {
  $("#links_div a").on("mouseenter", function() {    
    $("#img_div").addClass($(this).attr('data-class'));
  });
  
  $("#links_div a").on("mouseleave", function() {
    $("#img_div").removeClass($(this).attr('data-class'));
  });
});

＆＃13;

#img_div {
  height: 200px;
  width: 200px;
  background: url("http://placehold.it/200x200");
}
#img_div.a {
  background: url("http://placehold.it/200x200?text=a");
}
#img_div.b {
  background: url("http://placehold.it/200x200?text=b");
}
#img_div.c {
  background: url("http://placehold.it/200x200?text=c");
}
#img_div.d {
  background: url("http://placehold.it/200x200?text=d");
}
#img_div.e {
  background: url("http://placehold.it/200x200?text=e");
}
#links_div {
  float: left;
  height: 200px;
  width: 200px;
}
ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
ul li {
  display: block;
}
ul li a {}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div id="img_div"></div>
  <div id="links_div">
    <ul>
      <li><a href="javascript:void(0)" data-class="a">Show image 1</a>

      </li>
      <li><a href="javascript:void(0)" data-class="b">Show image 2</a>

      </li>
      <li><a href="javascript:void(0)" data-class="c">Show image 3</a>

      </li>
      <li><a href="javascript:void(0)" data-class="d">Show image 4</a>

      </li>
      <li><a href="javascript:void(0)" data-class="e">Show image 5</a>

      </li>
    </ul>
  </div>
</div>

＆＃13;

Answer 2

有一个CSS规则只影响类altImage的div：

#img_div.altImage {
    background: url("images/alt.jpg");
}

使用javascript，在悬停时向div添加一个类：

var links = document.getElementById("links_div");

links.addEventListener("mouseenter", function(e) {
    document.getElementById("img_div").classList.add("altImage");
});

links.addEventListener("mouseleave", function(e) {
    document.getElementById("img_div").classList.remove("altImage");
});

那应该有用

css onmousehover的背景图像变化

2 个答案: