は、私はちょうど、カーソルを画像の上に置くように見える要素の影響をしようとしていますイメージ

Question

上にホバー上のdiv要素のクラスを追加します。私はコンテンツを内部に置くことができるボックスを表示したい、可能であればビデオや画像にする。ここまでは、ホバー効果が出てきたので、クラスを追加するためのスクリプトを書こうとしましたが、なぜ動作していないのか分かりません。

<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

より良いのMouseEnter-mouseleaveイベントに行く

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

    }); 
</script> 

を、文書レディ機能でコードをラップ切り替えクラスに簡単な引用符を追加し、カラムセレクタ

Answer 2

Quotesは誤っているplaced.Andてみてください

$(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>