Question

我想这样做，以便当一个带有“dropdown”类的div悬停在上面时，带有id“workButton”的某段文本会强调下划线。我想使用jQuery来做这件事，除非有可能在CSS中实现它。我目前拥有它，以便当文本悬停在它下面并变成白色时，但我希望当“下拉”悬停时发生同样的事情。（id为“workbutton”的文本也有类“menuContent”）

CSS：

.menuContent:hover {
    text-decoration: underline;
    cursor: pointer;
    color: #ffffff;
}
.menuContent {
    font-family: "cicle-gordita";
    text-align: center;
    padding: 0px;
    margin: 0px;
    margin-top: 10px;
    color: #b4b0b0;
    text-decoration: none;
    font-size: 40px;
}
.dropdown {
    margin-top: 50px;
    height: 50px;
    width: 100%;
    background: #ffffff;
    position: fixed;
    display: none;
}
.dropdown-menuBit {
    height: 40px;
    margin: 0px;
    padding: 0px;
    float: left;
    margin-left: 20px;
}
.dropdown-menuContent {
    font-family: "cicle-gordita";
    text-align: center;
    padding: 0px;
    margin: 0px;
    color: #b4b0b0;
    text-decoration: none;
    font-size: 30px;
    padding-top: 5px;
}
.dropdown-menuContent:hover {
    text-decoration: underline;
    cursor: pointer;
    color: #ffffff;
}

JQuery的：

var main = function() {
  $('.dropdown').hide(function() {
    $('.main').animate({
      top: "-50px"
    }, 0);
  });

  $('#workButton').hover(function() {
    $('.dropdown').fadeIn(1)

    $('.main').animate({
      top: "0px"
    }, 100)
  });

  $('.main, #blogButton, #homeButton, .logo').hover(function() {
    $('.dropdown').fadeOut(200)

    $('.main').animate({
      top: "-50px"
    }, 200)
  });

Answer 1

只需将:hover放在父级上，它就可以正常工作：

.dropdown:hover #workButton

使用Jquery为下划线文本

1 个答案: