使用Jquery在mouseover上设置样式子元素的问题

Question

我正在尝试在将鼠标移到父<ul>元素上时更改<li>元素的样式，但我无法使其工作。我认为问题在于我选择子元素的方式，因为它具有“未定义”值。

我也尝试过按类名选择元素，但它也不起作用。

以下是代码：

$(function() {
  $(".parent").on("mouseover", updatetop);

});


function updatetop() {
  var c_child = $(this).children("ul");
  c_child.style.visibility = "visible";
  c_child.style.border = "1px solid black";

}

.parent {
  border: 1px solid black;
  width: 100px;
}

.parent ul {
  position: absolute;
  left: 100px;
  width: 100px;
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="parent">
  <a href="#">PARENT</a>

  <ul class="p_child">
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
  </ul>

</li>

Answer 1

children()方法返回一个jQuery集合，而不是DOM对象。

您可以使用jQuery的css()方法进行样式设计：

var c_child = $(this).children("ul");
c_child.css({
  visibility: 'visible',
  border: '1px solid black'
});

<强>段：

$(function() {
  function updatetop() {
    var c_child = $(this).children("ul");
    c_child.css({
      visibility: 'visible',
      border: '1px solid black'
    });
  }

  $(".parent").on("mouseover", updatetop);
});

.parent {
  border: 1px solid black;
  width: 100px;
}

.parent ul {
  position: absolute;
  left: 100px;
  width: 100px;
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="parent">
  <a href="#">PARENT</a>

  <ul class="p_child">
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
  </ul>

更典型的方法是使用CSS :hover：

.parent:hover ul {
  visibility: visible;
  border: 1px solid black;
}

这样，您就不需要添加mouseout事件。

<强>段：

.parent {
  border: 1px solid black;
  width: 100px;
}

.parent ul {
  position: absolute;
  left: 100px;
  width: 100px;
  visibility: hidden;
}

.parent:hover ul {
  visibility: visible;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="parent">
  <a href="#">PARENT</a>

  <ul class="p_child">
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
  </ul>

Answer 2

只需添加到您的CSS

.parent:hover ul {
     visibility: visible;
     border: inherit;
}

您不必为此使用jQuery。

Answer 3

您好，您可以通过CSS轻松完成此操作。

li.parent:hover ul {background-color:#333}

如果你想通过jquery，请告诉我。