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;
    }
});

我认为这可以完成你所追求的目标，只需在.description之外点击隐藏.tooltip。目前没有任何东西可以点击。

这是一个小提琴：http://jsfiddle.net/BZ4M7/1/

JQuery - 单击，使用重置禁用鼠标悬停

1 个答案: