Question

帮助我实现这样的目标：

我有两个菜单http://osiyo-nur.uz/osiyo-nur.uz/test6/其中一个菜单是不可见的，当我将鼠标悬停在其中一个菜单上时，第二个菜单变得可见，背景正在显示叠加效果。在这种情况下，我使用按钮而不是菜单。我使用了这个条件，但它没有用。如果你能帮助我，那将是件好事。

＆＃13;

$(document).ready(function() {
  if ($(".none").css('display') == 'block') {
    $("#overlay").css('display', 'block');
  } else {
    $("#overlay").css('display', 'none');
  }

});

＆＃13;

.none {
  display: none;
  width: 60%;
  background: red;
  color: #fff;
  text-align: center;
}

.block {
  display: block;
  width: 60%;
  text-align: center;
  background: red;
  color: #fff;
  margin-bottom: 5rem;
}

.block:hover+.none {
  display: block;
}

.block:hover .overlay {
  display: block;
}

.overlay {
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: block;
  background-color: rgba(0, 0, 0, 0.6);
  overflow-x: hidden;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>GoodGross</title>

  <link href="css\style.css" rel="stylesheet">
</head>

<body>
  <div>
    <!-- HEADER PART STARTS -->
    <div class="main_content">
      <div class="test">
        <a class="btn btn-danger block">Block</a>
        <a class="btn btn-danger none">None</a>
      </div>
    </div>
    <div class="overlay" id="overlay"></div>
    <div class="clear"></div>

  </div>

</body>

</html>

＆＃13;

Answer 1

使用此

$('.block').on('mouseover', function() {
$("#overlay").css('display', 'block');
});

$('.block').on('mouseleave', function() {
$("#overlay").css('display', 'none');
});

＆＃13;

$('.block').on('mouseover', function() {
$("#overlay").css('display', 'block');
});

$('.block').on('mouseleave', function() {
$("#overlay").css('display', 'none');
});

＆＃13;

.none {
  display: none;
  width: 60%;
  background: red;
  color: #fff;
  text-align: center;
}

.block {
  display: block;
  width: 60%;
  text-align: center;
  background: red;
  color: #fff;
  margin-bottom: 5rem;
}

.block:hover+.none {
  display: block;
}

.block:hover .overlay {
  display: block;
}

.overlay {
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: none;
  background-color: rgba(0, 0, 0, 0.6);
  overflow-x: hidden;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>GoodGross</title>

  <link href="css\style.css" rel="stylesheet">
</head>

<body>
  <div>
    <!-- HEADER PART STARTS -->
    <div class="main_content">
      <div class="test">
        <a class="btn btn-danger block">Block</a>
        <a class="btn btn-danger none">None</a>
      </div>
    </div>
    <div class="overlay" id="overlay"></div>
    <div class="clear"></div>

  </div>

</body>

</html>

＆＃13;

Answer 2

使用jquery hover（）方法 $（document）.ready（function（）{

  $("a.block").hover(function() {
    $("#overlay").css('display', 'block');
  }, function() {
    $("#overlay").css('display', 'none');
  });

});

请参阅此网址上的演示：https://jsfiddle.net/jitenderdhankhar/85qq5Lwo

Answer 3

您可以尝试此代码

 $(document).ready(function() {
    $('.block').hover(function(){
        $('.overlay').css('display', 'block');
        $('.none').css('display', 'block');
    });
    $('.none').hover(function(){
        $('.overlay').css('display', 'none');
        $('.none').css('display', 'none');
    });

});

需要在css文件中添加额外的css

/*aditional Css*/
.none{
    position: relative;
    z-index: 9999;
}

如何检查元素是否具有某种样式，以及它是否具有样式更改另一个元素的样式？

3 个答案: