Javascript 我能'；t在Tumblr上进行mouseover/mouseout JQuery div转换

这是我第一次使用任何形式的JavaScript，在花了几个小时苦心玩弄这段代码之后，我不知所措。我不可能是唯一的一个

我试图创建一个过渡效果，它以一个包含文本“HOVER”的div开头。鼠标悬停时，它会展开另一个与文本相关的div，同时隐藏“HOVER”div。当鼠标移走时，“HOVER”div将返回

虽然我确实认为我已经找到了代码，并且它可以工作（仅作为JQuery OnLoad），但它在Tumblr上不起作用。我可以得到悬停展开动画，但第二个文本div不会取代“hover”div。“hover”div始终可见

我尝试过更改Tumblr的src链接以识别和加载JQuery，尝试过在body标记上放置触发器扩展名（虽然可能做得不正确），尝试过将代码粘贴到标题中，在开始body标记之后和结束body标记之前

“我的头”中的脚本：

<script type=”text/javascript” src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type=”text/javascript” src=”http://static.tumblr.com/53unaru/kx3lgzker/jquery-1.3.2.min.js” charset=”utf-8”></script>

<script>
    $('#descriptiontext1').on('mouseover', function () {
    $('#descriptiontext2').show();
    $('#descriptiontext1').hide();
        });
});

$('#descriptiontext2'').on('mouseout', function () {
    $('#descriptiontext1').show();
    $('#descriptiontext2').hide();
        });
});
</script>

HTML：

<div id="description2">
<div id="descriptiontext1">HOVER</div>
<div id="descriptiontext2">TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN TESTIN</div></div>

悬停
睾丸，睾丸，睾丸，睾丸，睾丸，睾丸，睾丸，睾丸，睾丸，睾丸，睾丸，睾丸，睾丸，睾丸，睾丸，睾丸，睾丸，睾丸，睾丸，睾丸

更改

$('#descriptiontext1').on('mouseover', function () {
    $('#descriptiontext2').show();
    $('#descriptiontext1').hide();
        });
});

$('#descriptiontext2'').on('mouseout', function () {
    $('#descriptiontext1').show();
    $('#descriptiontext2').hide();
        });
});

到

使用

$.noConflict（）jquery

库。

---

您可以看到完整的文档

将事件绑定包装在DOM就绪事件中。这在jQuery中非常常见，对于反加载问题非常重要

// once the DOM is ready
$(function(){
    $('#descriptiontext1').on('mouseover', function () {
        $('#descriptiontext2').show();
        $(this).hide();
    });

    $('#descriptiontext2').on('mouseout', function () {
        $('#descriptiontext1').show();
        $(this).hide();
    });
});

另外请注意，jQuery支持一个切换函数，该函数自动处理/切换

show（）

和

hide（）

。尚未对其进行测试，但如果默认情况下

descriptionext2

处于隐藏状态，则类似于此的内容可能适用于您：

$(function(){
    var descriptions = $('#descriptiontext1, #descriptiontext2');

    descriptions.on('mouseover, mouseout', function () {
        descriptions.toggle();
    });
});

---

快速方式，如果您想让它更先进，您可以使用事件侦听器上的mouseout、mouse in和函数来实现更好的可读性和优化。此外，不必使用js隐藏和显示，也可以使用css3

$('#descriptiontext1').on('mouseover', function () {
    $('#descriptiontext2, #descriptiontext1').toggle();
});

$('#descriptiontext2').on('mouseout', function () {
    $('#descriptiontext2, #descriptiontext1').toggle();
});

---

请原谅我对这一点一无所知，但您能否解释或提供一个清晰的指南，说明如何在DOM中封装我的事件绑定？我试图把我能在上面找到的东西弄得乱七八糟，但我100%肯定我做错了。我也尝试了后者，但效果相同。提前谢谢。当页面加载时，问题就开始了，首先加载jQuery库（+-100ms），然后加载

标题。它继续绑定事件，查找
$（'#descriptionext1'）
和2（+-200ms），但这些对象将为空。然后才加载HTML（+-300ms）。使用DOM就绪处理程序，事件绑定将处于保留状态，直到加载HTML为止。只有这样你才能确定找到了这些东西。看小提琴。还要注意，在CSS和jQuery选择器中，
#
用于
id
属性
用于
类
属性。这两种选择似乎都如预期的那样有效。不确定为什么包含两个版本的jQuery。尝试改用1.11.0。非常感谢您的帮助。不幸的是，我试过了，但仍然得到了完全相同的结果。还尝试了使用1.11.0的副本，但没有使用第二个jquery版本。我不知道为什么Tumblr有问题。它在Tumblr之外自己工作，但在Tumblr的编码中不工作。这为我提供了与以前相同的结果。我尝试只使用CSS来执行我想要的，但它不会用第二个div替换第一个div，它只会扩展它下面的第二个div。除此之外，它不会隐藏第二个div。它会显示在第一个div的下面。不幸的是，这就是我开始研究这个问题的原因。真是一团糟。）：不幸的是，这给了我同样的结果，我已经收到。）：已尝试使用或不使用第二版本的jquery库进行编辑。我不知道为什么Tumblr有问题。它在Tumblr之外独立工作，但在Tumblr的编码中不起作用。您能否添加一个指向Tumblr日志的链接来显示问题。确保jQuery代码在标记后面。我还想问一下为什么要包含两个版本的jQuery。
$(function(){
    var descriptions = $('#descriptiontext1, #descriptiontext2');

    descriptions.on('mouseover, mouseout', function () {
        descriptions.toggle();
    });
});

$('#descriptiontext1').on('mouseover', function () {
    $('#descriptiontext2, #descriptiontext1').toggle();
});

$('#descriptiontext2').on('mouseout', function () {
    $('#descriptiontext2, #descriptiontext1').toggle();
});