javascript - JQuery - 单击，通过重置禁用鼠标悬停

Question

我目前有一个远离图像弹出的工具提示。但是，我似乎无法在悬停的同时进行点击。我想要实现的是让弹出窗口在用户单击图像时保持可见，并在用户在弹出框外单击时禁用它，但是，如果用户将鼠标悬停在图像中并隐藏时，它将是可见的用户将鼠标悬停在图像之外。我不太确定如何解决这个问题。

http://jsfiddle.net/BZ4M7/

HTML

<div class="tooltip">
<div class="description"> Here is the big fat description box</div>
</div>

CSS

.tooltip {
    border: 1px #333 solid;
    width:200px;
    height:200px;
    background-image:url('http://mathworld.wolfram.com/images/gifs/sqtripic.gif');
}
.description {
    display:none;
    position:absolute;
    border:1px solid #000;
    width:400px;
    height:400px;
    left: 50%;
    top: 50%
    background: #000000;
}

JS

$(".tooltip").mouseover(function() {
    $(this).children(".description").show();
}).mouseout(function() {
    $(this).children(".description").hide();
});

var isShown;
$(".tooltip").mousedown(function() {
    if (isShown == false){
        $(this).children(".description").show();
        isShown = true;
    }
}).mousedown(function() {
    if (isShown == true){
        $(this).children(".description").hide();
        isShown = false;
    }
});

任何帮助将不胜感激! :) 谢谢!

Answer 1

对您的 CSS 进行以下添加/更改后:

.tooltip {
    position: relative;
}
.description {
    left: 102%;
}

以及对您的 JS/jQuery 的以下更改:

$(".tooltip").mouseenter(function (e) {
    $(this).children(".description").show();
}).mouseleave(function() {
    if (isShown === false) {
        $(this).children(".description").hide();
    } else {
        e.preventDefault();
    }
});

isShown = false;
$(".tooltip").click(function (e) {
    if (isShown === true) {
        e.preventDefault();
        $('.description').hide();
        isShown = false;
    } else {
        $(this).children('.description').show();
        isShown = true;
    }
});

除了通过在 .tooltip 之外单击来隐藏 .description 之外，我认为这可以完成您想要的。目前没有任何东西可以点击。

这是一个 fiddle :http://jsfiddle.net/BZ4M7/1/