Javascript jquery toggleClass不起作用

我正在使用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'));
});

//css
.details{显示：无；}
//html
我和伊莫金·普茨
//jquery
$（'.photo'）.mouseenter（函数（）{
$（this.toggleClass（$（this.find（'.details'））；
});

当鼠标指针出现时，我想切换每张照片的

details类。因此，我将在
mouseenter
回调函数中放置一个
toggleClass
，对吗？但这不起作用，我的控制台上没有错误。我错过了什么
 使用
hover（）
代替
mouseenter（）

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

试试这个：

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

演示->

向div添加另一个类
innerDiv
，并使用它来切换

<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');
});


我和伊莫金·普茨
$（'.photo'）.mouseenter（函数（）{
$（this.find（'.innerDiv'）.toggleClass（'details'）；
});
由于您正在执行
.details{display:none}
，并且在将鼠标悬停在图像上时仅显示/隐藏文本，因此我将执行以下操作

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

奎师那的答案需要对我的原始代码进行更少的修改。imbondbaby的答案需要更少的代码和回调函数中更少的链接。这是这两者的结合

html和css部分保持不变，只有jquery对此进行了更改：

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

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

感谢大家的回答、时间和努力：）
What
$（this.toggleClass（$（this.find））
应该做什么？@j08691切换特定
照片类的特定
细节类
。这就是我的想法查看
.toggleClass（）
的文档。它接受一个或多个类名，但您正在向它提供一个jQuery对象。@j08691。谢谢你的信息。为什么
$（this.find（'.details'）
是一个对象？它应该只是一个类名吗？还有，有没有办法把它从一个对象转换成一个简单的字符串？再次感谢。鼠标第二次进入
.photo
，
$（此）。查找（'.details'）
将返回
[]
。在这里，你真的应该有一种方法来瞄准内部div，而不是你正在切换的类名。@Imbondbay不幸的是，我不能接受两个答案（你的和krishna的）。