Question

当用户在div上点击鼠标时，我想要标题（不是工具提示）“弹出”。

当鼠标悬停时我不想等待标题显示（但它也需要鼠标悬停）。

<div id="someDiv" title ="Info on both click and hover!"></div>

此时我并不关心它是如何完成的： - ）

修改

好的回顾我想要做的事情：

我需要在点击div 后立即弹出标题，但如果我没有点击div上的，我喜欢标题与mouseover一样正常工作。绝不应该同时出现2个标题。

这只是我试图解决的问题之一。我有标题属性..但现在呢？这可能很容易......

$('#someDiv').click(function () {
  $(this).attr("title");   
  //And how do I show the title right away?
});

Answer 1

我创建了一个jQuery函数 $ .hasTitle（）

这个新函数获取元素的父 div.title ，然后使用下一个 span.text 作为标题。现场检查：

http://jsfiddle.net/t7kf6ge8/1/

JS：

(function($) {
    jQuery.fn.extend({
        hasTitle: function(){
            $(this).on("mouseenter mouseout", function(e){
                var title = $(this).closest("div.title");
                var text = title.next("span.text").first();
                text.fadeToggle().css({
                    left: e.pageX,
                    top:  e.pageY
                });
            });
        }
    });
})(jQuery);



$("#elementOne").hasTitle();
$("#elementTwo").hasTitle();

HTML：

<div class="title">
    <div id="elementOne">
        elementOne
    </div>
</div><span class="text">Title: Info on hover!</span>

<br/><br/><br/><br/>

<div class="title">
    <ul id="elementTwo">
        <li>item 1</li>
        <li>item 2</li>
    </ul>
</div><span class="text">It is a list</span>

css :(您可以根据自己的喜好更改css代码，因鼠标/光标效果只需要 position：absolute ）

span.text{
    position: absolute;
    display: none;
    font-size: 10px;
    font-family: Comic Sans MS;
    background-color: #ccc;
}

单击div时是否可以显示标题？

1 个答案: