Question

这是我第一次使用任何形式的JavaScript，经过几个小时的艰苦尝试这段代码，我感到茫然。我不可能是唯一一个。

我试图创建一个以包含文字＆＃34; HOVER＆＃34;的div开头的过渡效果。当鼠标悬停时，它会扩展另一个与文本相关的div，同时隐藏＆＃34; HOVER＆＃34; DIV。当鼠标被移除时，＆＃34; HOVER＆＃34; div会回来。

虽然我认为我已经找到了代码并且它可以在JSFiddle上运行（仅作为JQuery OnLoad），但它不会在Tumblr上工作。我能够获得悬停扩展动画，但第二个文本div不会取代＆＃34; HOVER＆＃34; DIV。＆＃34; HOVER＆＃34; div总是可见的。

我已经尝试更改Tumblr的src链接以识别并加载JQuery，我已经尝试在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>

CSS：

#description2 {
    z-index: 999;
    position:fixed;
    text-align:justify;
    left:0px;
    top:436px;
    margin-left:70px;
    width: 150px;
    height:15px;
    padding:1px;
    border:1px solid #ccc;
    font-family:'brie';
    font-size:10px;
    background-color: #fff;
    overflow-y:none;
    overflow-x:none;
    opacity:0.9;
    filter:alpha(opacity=90);
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
#description2:hover {
    z-index: 999;
    position:fixed;
    left:0px;
    top:355px;
    margin-left:20px;
    width: 232px;
    height:150px;
    padding:15px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
#descriptiontext1 {
    padding:0px;
    text-align: center;
    font-family:'brie';
    font-size:10px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
#descriptiontext2 {
    padding:15px;
    font-family:'brie';
    font-size:10px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    display: none;
}

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>

Answer 1

更改

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

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

要

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

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

<强> DEMO HERE

使用$.noConflict();方法，因为您使用的是jquery库的两个版本。您可以查看完整的文档here

Answer 2

将事件绑定包装在DOM ready事件中。这在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()。尚未对其进行测试，但如果默认情况下隐藏descriptiontext2，则可能会对您有所帮助：

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

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

<强> DEMO

Answer 3

快速的方法是，如果你想让它前进，你可以在事件监听器上使用鼠标输出，鼠标输入和功能，以获得更好的可读性和优化。你也不必使用js来隐藏和显示，你也可以使用css3。

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

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

我无法在Tumblr上进行mouseover / mouseout JQuery div转换

3 个答案: