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事件

Answer 2

错误地放置了

Quotes。并尝试使用$(document).ready(function(){}

$(document).ready(function(){  
$('.column').hover(
            function(){$(this).toggleClass('hoveritem');}
        );
  })

.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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="scripture">
    <div class="hover11 column wholeimage">
        <div>
            <figure><img src="img/large.jpg" class="largeimage largerimage" /></figure>

        </div>
    </div>
</div>

在悬停上添加div元素类到图像上

2 个答案: