Question

我在HTML页面上有按钮。当我将鼠标悬停在它上面时，我会显示一个div。当我这样做时，我需要禁用背景或灰色背景，除了我打开的新div。当鼠标/光标移出此div时，一切都应该正常（启用所有内容）并关闭新的div。

我该怎么做？

以下是js小提琴。

$("#mylink").hover(function() {
        $("#mydiv").show();
    });

    $("#mydiv").mouseleave(function(){
        $("#mydiv").hide();
    });

http://jsfiddle.net/ashishjmeshram/hhkvar20/

Answer 1

这是working JSFiddle

$("#mylink").hover(function() {
    $(this).css('background-color', 'gray');
    $("#mydiv").show();
});

$("#mydiv").mouseleave(function(){
    $("#mylink").css('background-color', 'white');
    $("#mydiv").hide();
});

编辑：

如果你想要一个模态叠加，你还需要一个关闭按钮，因为当它有一个div时，你不能鼠标移动链接：

JSFiddle

HTML：

<div class="md-modal md-effect-1" id="modal-1">
    <div class="md-content">
        <h3>Modal Dialog</h3>
        <div>
            <p>Thsi is some test div.</p>
            <button class="md-close">Close me!</button>
        </div>
    </div>
</div>

<a href="#" id="mylink">Hover to show custom div</a>

<div class="md-overlay"></div>

JS：

$("#mylink").hover(function() {
    $(".md-modal").addClass('md-show');
});

$(".md-close").click(function(){
    $(".md-modal").removeClass('md-show');
});

Answer 2

检查jQuery的悬停API：https://api.jquery.com/hover/，找到一个简单的答案：

    $("#mylink").hover(function() {
        $("#mydiv").show();
    }, function(){
        $("#mydiv").hide();
    });

Answer 3

你需要Lightbox吗？像这个： https://gist.github.com/b9d9f8ef4482ca0bd352

Answer 4

试试这个：你可以在悬停div时改变身体背景颜色，并在移除鼠标指针时使其正常。

$("#mylink").hover(function() {
        $("#mydiv").show();
        $('body').css('background-color','grey');
    },function(){
        $("#mydiv").hide();
        $('body').css('background-color','white');
});

<强> JSFiddle Demo

Answer 5

如何创建一个跨越整个页面并将其bg颜色设置为不透明的div？看看这个Fiddle

	$("#mylink").hover(function() {
	  $("#block").show();
	  $("#mydiv").show();
	});

	$("#mydiv").mouseleave(function() {
	  $("#mydiv").hide();
	  $("#block").hide();
	});

#block {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 1;
}
#mydiv {
  display: none;
  position: relative;
  z-index: 9;
}
#mydiv button {
  z-index: inherit;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<a href="#" id="mylink">Hover to show custom div</a>

<div id="mydiv">
  <button>This is some test div.</button>
</div>
<div id="block"></div>

如何使用jquery禁用背景？

5 个答案: