Question

我正在使用jquery构建一个照相馆。这是我的代码

//css
<style>
.details{display:none;}
</style>

//html
 <div class="photo">
            <img src="meAndImogenPoots.jpg">
            <div class="details">
                Me and Imogen Poots
            </div>
</div>

//jquery
$('.photo').mouseenter(function() {
        $(this).toggleClass($(this).find('.details'));
});

我想在鼠标中心发生时切换每张照片的details class。所以我会在toggleClass回调函数中放一个mouseenter，对吧？但这不起作用，我的控制台上没有错误。我错过了什么？

Answer 1

使用hover()代替mouseenter()。

使用jQuery隐藏.details，而不是通过CSS进行隐藏。

试试这个：

$(document).ready(function(){
    $(".details").hide();
    $(".photo").hover(
    function(){
        $(this).find('.details').toggle();
    });
});

<强> JSFiddle Demo

Answer 2

DEMO - ＆gt;的 http://jsfiddle.net/6xXpj/2/

将另一个类innerDiv添加到div并使用它来切换

<div class="photo"> <img src="meAndImogenPoots.jpg"> <div class="innerDiv details">Me and Imogen Poots</div> </div> $('.photo').mouseenter(function () { $(this).find('.innerDiv').toggleClass('details'); });

Answer 3

由于您正在执行.details { display: none }，并且只是在将鼠标悬停在图片上时显示/隐藏文字，这就是我要做的事情。

$('.photo img').on
({
    mouseenter: function () { $(this).parent().find(".details").show(); },
    mouseleave: function () { $(this).parent().find(".details").hide(); }
});

See working jsFiddle demo

Answer 4

Krishna的回答要求对原始代码进行少量修改。 imbondbaby的答案需要更少的代码，并且在回调函数中需要更少的链接。所以这是这两个的组合

html和css部分保持不变，只有jquery更改为：

$('.photo').bind('mouseenter mouseleave', function(){
    $(this).find('.details').toggle();
});

我还必须在bind和mouseenter事件中添加mouseleave，以便在发生这些事件时切换类，并使代码保持小巧，紧凑和干净。

感谢大家的回答，时间和精力：）

jquery toggleClass不起作用

4 个答案: