クリック時の強制ホバー状態のセカンダリ要素

JS noobieからの簡単な質問。クリック時の強制ホバー状態のセカンダリ要素

サイトでは、基本的に2つの部分からなる製品のイメージがあります。次に、透明な背景を持つこれらの個別部分の小さい.pngサムネイルの行があります。 CSSでは、サムネイルをホバーするとposition: absoluteを使用して元の製品画像と同じ色オプションの大きなバージョンをオーバーレイする.colorzoomクラスを有効にするように設定しました。

HTML：私は簡単にCSSを使用して、単一のカラーオプションを非表示にすることができますし、次の色がラインアップされますので、

<div class="coloroptions"> 
       <div class="j210desertsand"> 
       <div class="colorthumbnail"> 
       <a href="javascript:void(0)" id="colorpicker"> 
       <img src="img/products/colors/j210desertsand.png"></a> 
       <span class="colorzoom"><img src="img/products/colors/j210desertsand.png"> 
       </span></div></div> 
       <div class="j210platinum"> 
       <div class="colorthumbnail"> 
        <a href="javascript:void(0)" id="colorpicker"> 
       <img src="img/products/colors/j210platinum.png"></a> 
       <span class="colorzoom"><img src="img/products/colors/j210platinum.png"> 
       </span></div></div> 
</div>

<div class="j210desertsand">クラスが単にあります。アンカーポイントは、調査の結果、実際にサムネイルをクリック可能にする必要があることがわかりました。a href="javascript:void(0)"は実際にリンクしたり、ページをリロードしたりしません。

CSS：（私は経験の浅いよ、混乱すみません）

.coloroptions { 
    width: 60%; 
    margin-left: 40%; 
} 

.colorthumbnail { 
    margin-left: -45%; 
} 

.colorthumbnail img { 
    float: left; 
    max-width: 16%; 
    padding-right: 5px; 
    position: relative; 
} 


.colorthumbnail .colorzoom { 
    position: absolute; 
    width: 253%; 
    margin-top: 6.9%; 
    display: none; 
    margin-left: -3.6%; 
} 



.colorthumbnail:hover .colorzoom { 
    display: block; 
}

さて、これはうまく動作しているように見えますが、2つの異なる部分があるので、私は、ユーザーに色のオプションを組み合わせる能力を与えたいと明らかに、一度に2つの画像にマウスを合わせることはできません。いくつかの調査の後、私はクリック時に:hoverの状態を強制するためにJavascriptが必要であることを発見しました。しかし、私は正直に言って、私は何をしているのか分かりません。これは私が持っているものです：

<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
</head> 

<!-- -----------------------JSQuery------------------------- --> 
<script> 
$("#colorpicker").click(function() { 
    $('.colorthumbnail:hover').toggleClass('colorthumbnail:hover .colorzoom'); 
}); 
</script> 
<!------------------------ JSQuery End -------------------------->

しかし、これは動作していないようです。私は<head>のリンク先のスクリプトを入手しましたか？「Hello World」ポップアップテストで正常に動作しました。私はスクリプトのクラスを正しく取得しましたか？私はちょっと立ち往生して、助けていただければ幸いです！コミュニティのための多くの愛。このようにコードを追加すること

出典

2017-04-17 Feronix

試してみてください。

$(document).ready(function() { 
    $("#colorpicker").click(function() { 
    $('.colorthumbnail:hover') 
    .toggleClass('colorthumbnail:hover.colorzoom'); 
    }); 
});

あなたはそれがDOM操作を行うことができますので、ページがロードされていることを確認する必要がありjqueryのを使用しようとしています。

ソース：https://api.jquery.com/ready/

ここではjsFiddleのデモです：https://jsfiddle.net/Lv571n1w/

あなたがクリックされたとき、それはクラスを切り替える見ることができる要素を検査した場合。

出典

2017-04-17 14:43:24 floor

あなたの返信ありがとうございますが、それは私の問題を解決するように見えませんでした。 jsfiddleでも '.colorthumbnail'をクリックしてカーソルを外すと' .colorzoom'が再び消えます（ '.colorthumbnail：hover'がアクティブなときだけ表示されるので）私の問題はちょうど私のjsだと思いますコードは間違っていますが、私の人生の理由から考えていけません。これは、何をステップバイステップで行うかを説明する簡単なチュートリアルの外でjqueryを使用して初めてのことです。 – Feronix

@Feronixは、フィドルの実行ボタンをクリックしましたか？それは私のために期待通りに機能するからです。 – floor

返事が遅いのは残念ですが、画像のより大きなバージョンは残っていません（$ {"colorpicker"）をクリックすることで動作させることができた。click（function（）{'しかし、ズームされた画像が現れたときにサムネイルが消えるようにした。私は今、2つの異なるjquery（同じページの2つ以上のページで使いやすいように）を使い、サムネイルの行間に拡大画像がロードされる間に、一番上の行と下の行として使い分けています。とにかく助けてくれてありがとう、私はそれを感謝します！ – Feronix

クリック時の強制ホバー状態のセカンダリ要素

答えて

関連する問題