Question

我想知道我做错了什么。

基本上我想在我将鼠标悬停在图像上时显示和隐藏div中的文本（取决于哪个图像）。

jQuery的：

$(document).ready(function() {
    $('.project_desc_1','.project_desc_2').hide();

    $('#project1').hover(function() {
        $('.project_desc_1').show();
    }, function() {
        $('.project_desc_2').hide();
    });

    $('#project2').hover(function() {
        $('.project_desc_2').show();
    }, function() {
        $('.project_desc_1').hide();
    });

HTML：

<div class="current_projects">
    <h1>Current Projects</h1>

    <div class="projects_gallery" align="center">

        <img src="./images/blivori.png"/ id="project1">
        <img src="./images/blivori.png"/ id="project2">

        <div class="project_desc_1">
            Project Description 1
        </div>

        <div class="project_desc_2">
            Project Description 2
        </div>

    </div>

</div>

Answer 1

希望您尝试根据图片显示说明，例如悬停project1展示project_desc_1和悬停project2展示project_desc_2。

这里缺少一些东西：

将$('.project_desc_1', '.project_desc_2').hide();更改为$('.project_desc_1, .project_desc_2').hide();
更改此HTML代码

从：

<img src="./images/blivori.png/" id="project1">
<img src="./images/blivori.png/" id="project2">

到

<img src="./images/blivori.png" id="project1">
<img src="./images/blivori.png" id="project2">

试试这个：

$(document).ready(function() {
        $('.project_desc_1, .project_desc_2').hide();

     $('#project1').hover(function() {
       $('.project_desc_1').show();
         $('.project_desc_2').hide();
      });

    $('#project2').hover(function() {
     $('.project_desc_2').show();
    $('.project_desc_1').hide();
            });
});

DEMO

Answer 2

在第二个悬停功能之后，您似乎缺少一对关闭括号。

Answer 3

也许您正在寻找以下内容：

$(document).ready(function() {
    $('.project_desc_1, .project_desc_2').hide();

    $('#project1').hover(function() {
        // when the mouse ENTERS the image
        $('.project_desc_1').show();
        $('.project_desc_2').hide();
    }, function() {
        // when the mouse LEAVES the image
        $('.project_desc_1').hide();
    });

    $('#project2').hover(function() {
        // when the mouse ENTERS the image
        $('.project_desc_1').hide();
        $('.project_desc_2').show();
    }, function() {
        // when the mouse LEAVES the image
        $('.project_desc_2').hide();
    });
}

代码应该隐藏与输入无关的div，并在休假时隐藏相关的div。尝试一下，看看它是否有效！

如果您希望看到这个工作 - 请查看以下JSFiddle：http://jsfiddle.net/kZPQp/

Answer 4

你应该简化一些事情并摆脱project1 / project2的业务。这对你在jQuery中做事的方式不友好。

我会建议这个HTML：

<div class="current_projects">
    <h1>Current Projects</h1>
    <div class="projects_gallery" align="center">
        <img src="./images/blivori.png"/ class="project_trigger">
        <img src="./images/blivori.png"/ class="project_trigger">
        <div class="project_desc">
            Project Description 1
        </div>
        <div class="project_desc">
            Project Description 2
        </div>
    </div>

使用以下jQuery

$(document).ready(function() {
    $('.project_desc').hide();  // Personally I would hide in CSS such that this step is not needed and possible flashing of content before onload wouldn't happen

    $('.project_trigger').hover(
        function() {
            var i = $('.project_trigger').index(this);
            // hide all descriptions
            // then show only description with index position
            // matching index position of trigger
            $('project_desc').hide()
                .eq(i)
                .show();
        },
        function() {
            // hide all descriptions
            $('project_desc').hide();
        }
    );
});

这样可扩展性更高，允许任意数量的触发项和目标项，而无需更改您的javascript。当然，触发器和描述的数量应该相等，这些的顺序很重要。

使用jQuery </div>隐藏/显示<div>内的内容

4 个答案: