Question

所以当有人徘徊<li>时，我需要让我的Div改变他的班级。

我该怎么做？

这可能只使用css还是我需要把一些JS放在里面？

编辑1：每个li都有一个特定的id，而div会将id作为一个类重新接收。

Answer 1

我认为你应该使用JQuery：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="unaffected">
    <p> some other parenting div, not affected</p>
    <div class="changeme">
    <p>some text, nothing changes</p>
    <ul>
        <li id="firstli">we are changing our parentting div!</li>
        <li id="secondli">we are changing our parentting div!</li>
        <li id="thirdli">we are changing our parentting div!</li>
    </ul>
    <p>some text, nothing changes</p>
    <ul>
        <li id="fourthli">we are changing our parentting div!</li>
        <li id="fifthli">we are changing our parentting div!</li>
    </ul>
    <p>some text, nothing changes</p>
</div>
</div>

Answer 2

转到div样式类定义并在名称附近添加“li：hover”;

 .yourDiv { font-size:14pt; }

然后转向此

 .yourDiv li:hover { font-size:14pt; }

Answer 3

要根据悬停的子<div>的ID为父级<li>元素分配一个类，首先检查悬停并获取ID名称，然后将其分配给父级{{1 }}

以下是一个代码，您可以在页面上使用几个div，它将通过使用jQuery方法的out处理程序在离开<div>悬停时重置类名：< / p>

＆＃13;

<li>

＆＃13;

$(".changeme ul li").hover(function(){
    $(this).parents("div").addClass($(this).attr("id"));
}, function(){
    $(this).parents("div").removeClass($(this).attr("id"));
});

＆＃13;

.changeme{
    background-color:#eee;
}

.changeme.firstli{
    background-color:#ffd;
}

.changeme.secondli{
    background-color:#fdd;
}

.changeme.thirdli{
    background-color:#dfd;
}

.changeme.fourthli{
    background-color:#ddf;
}

.changeme.fifthli{
    background-color:#ddd;
}

＆＃13;

https://jsfiddle.net/svArtist/adq5dr68/

Answer 4

您可以使用：hover属性，这样您就不必更改div的类，只能使用javascript。

Answer 5

CSS悬停属性可用于指定元素在悬停时的显示方式，但不能指示当第一个元素悬停时其他元素的显示方式。实现这种复杂性的行为需要一点JavaScript。

(function() {
  var div = document.getElementById("parent"); // save a reference to the target div
  var lis = div.querySelectorAll("li"); // get your <li> tags
  for (var i = 0, len = lis.length; i < len; i++) {
    lis[i].onmouseover = updateDivClass; // attach the event listener to each tag
  }
  div.onmouseout = function() { // remove class when no longer hovering over div
    this.className = "";
  };

  function updateDivClass() { // apply class to div when hovering over <li> tag
    div.className = this.id;
  }
})();

.Class1 {
  background-color: #df7000;
  font-family: Calibri;
  color: black;
}
.Class2 {
  background-color: purple;
  color: white;
  font-family: Segoe UI;
}
.Class3 {
  background-color: black;
  color: lightgreen;
  font-family: courier;
}

<div id="parent">
  Hover over a class below to apply the class to the entire div.
  <ul>
    <li id="Class1">Black Calibri with Orange Background</li>
    <li id="Class2">White Segoe UI with Purple Background</li>
    <li id="Class3">Light Green Courier with Black Background</li>
  </ul>
</div>

当<li>获取悬停时更改Div Div Class

5 个答案: