強制懸停狀態次要元素點擊

來自完整的JS noobie的快速問題。強制懸停狀態次要元素點擊

在一個網站上，我有一個產品基本上由兩部分組成的圖像，然後我有一排小.png縮略圖.colorthumbnail這些分開的部分與透明背景。在CSS中，我設置了它，以便在懸停縮略圖時啓用.colorzoom類，該類使用position: absolute覆蓋原始產品圖片的相同顏色選項的大版本。

HTML：

<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">類是根本沒有，所以我可以利用CSS容易隱藏單色選項，下顏色會排隊。這些錨點是有原因的，經過一些研究後，我發現我實際上應該使縮略圖可點擊並使用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; 
}

現在，這似乎很好地工作，但因爲有兩個不同的部分，我想給用戶相結合的色彩選擇能力，顯然你不能將鼠標懸停在兩張圖片上。經過一些更多的研究後，我發現我需要使用Javascript來強制點擊上的:hover狀態。但我會說實話，我不知道我在做什麼。這是我有：

<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（）{'但它使縮略圖隨着放大的圖像顯示出來而消失。現在我已經放棄並決定使用兩個不同的jquery（顯然，在一個頁面上使用比兩個更容易使用）作爲頂行和底行，而放大的圖像在縮略圖行之間加載。無論如何感謝您的幫助，我很感激！ – Feronix

強制懸停狀態次要元素點擊

回答

相關問題