javascript - 悬停在图像上时添加 div 元素类

Question

我只是想制作当光标悬停在图像上时元素出现的效果。我希望出现一个框，我可以在其中放置内容，可能是视频或图像。到目前为止，这是我所拥有的悬停效果，我尝试编写一个脚本来添加类，但我不确定为什么它不起作用。

<div id="scripture">
    <div class="hover11 column wholeimage">
        <div>
            <figure><img src="img/large.jpg" class="largeimage largerimage" /></figure>

        </div>
    </div>
</div>

    <script type="text/javascript">
        $(‘.column).hover(
            function(){$(this).toggleClass(hoveritem);}
        );

    </script>

CSS

.largerimager {
  opacity: 1
  width: 100%;
  height: auto;
  z-index: -1000;

}

.wholeimage {
    width: 100%;
    height: 500px;
    margin-bottom: 50px;
}

.hover11 figure img {
    opacity: 1;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.hover11 figure:hover img {
    opacity: .75;
}

.largeimage {
    max-width: 100%;
}

.hoveritem {
    width: 200px;
    height: 600px;
    background-color: black;
}

Answer 1

将您的代码包装在文档就绪函数中，向切换类和列选择器添加简单的引号

<script type="text/javascript">
    $(function(){
            $('.column').hover(
                function(){$(this).toggleClass('hoveritem');}
            );

    });
 </script>

最好使用 mouseenter-mouseleave 事件