Question

我还在学习jQuery，这是我非常简单的jquery页面： http://jsfiddle.net/RBJ9R/1452/

正如您所看到的那样效果非常好，但问题是当原始文本<div id="slender-trigger">nnnn</div>仍然显示时，它看起来有点蹩脚。

当显示另一个div（细长）时，如何使“Slender-trigger”div的文本消失？（当其他div当然再次消失时，它必须回来）

作为旁注，任何想法如何在鼠标悬停在“细长”div盒上时如何阻止“细长触发”div的“闪烁”？

Answer 1

您可以使用jQuery数据将文本附加到元素。

例如：

$("#slender-trigger").data("text", $("#slender-trigger").text());

然后它就像：

一样简单

$("#slender-trigger").hover(function() { 
 $("#slender").toggle();
 if(e.type == "mouseenter") {
   $("#slender-trigger").text("")
 } else {
   $("#slender-trigger").text($("#slender-trigger").data("text"));
 }
});

jQuery Hover

jQuery Data

修改多个方案场景。

让我们说你要隐藏的所有盒子都是类（细长触发器）通知我现在不使用id，因为它只适用于一个盒子。

保存方框的所有文本数据：

$(".slender-trigger").each(function(index, element){ //Iterate the boxes
   $(this).data("text", $(this).text());
});

现在让我们附加悬停元素：

$(".slender-trigger").hover(function(e) {
  $(this).next().toggle();
 if(e.type == "mouseenter") {
   $(this).text("")
 } else {
   $(this).text($(this).data("text"));
 }
});

编辑：仅将其设为一个功能，因此您可以在一个功能中享受所有三个hoverIn，hoverOut和hoverInOut。

Answer 2

$("#slender-trigger").hover( function() { $("#slender").toggle();
                 if ($("#slender").is(":visible")) {
                    $("#slender-trigger").text("");
                 }
                 else {
                    $("#slender-trigger").text("nnnn");
                 }
} );

jquery - 让原始DIV的文字消失

2 个答案: