我正在使用 JQuery 在影像上應用懸停效果。
頁面加載狀態：
懸停狀態：
退出滑鼠狀態：
這是代碼片段：
$(document).ready(function(){
$(".image-container").hover(function() {
$(this).parents().children().children('.image-01').css({'background-color':'#D4E619', 'opacity': '0.5'}),
(function() {
$(this).parents().children().children('.image-01').css({'background-color':'#FFFFF','height':'0', 'opacity': '0', 'visibility' :'hidden'});
});
});
});
我嘗試了幾個 css 指令，但影像保持懸停狀態。
編輯 ：
最終目標是在網格內的多個影像上使用不同的懸停顏色。網格的所有元素都具有相同的類名。
我使用第一個 JQuery 函式來附加類名，然后在某些影像上生成特定的懸停狀態。
uj5u.com熱心網友回復：
這是因為您將輸入和輸出功能混為一談。所以你（我假設）應該在滑鼠離開時呼叫的第二個函式永遠不會被呼叫。
您應該從第一個函式中解包該函式并將其作為第二個引數 .hover
$(document).ready(function() {
$(".image-container").hover(
function() {
$(this).parents().children().children('.image-01').css({
'background-color': '#D4E619',
'opacity': '0.5'
})
},
function() {
$(this).parents().children().children('.image-01').css({
'background-color': '#FFFFF',
'height': '0',
'opacity': '0',
'visibility': 'hidden'
});
}
);
});一些建議（非常抽象，因為沒有提供 HTML）：
- 您可以通過找到最接近的唯一包裝器然后找到所需的元素來降低選擇器的復雜性：
$(this).closes('.image-wrapper').find('.image-01') - 通過 JS 僅應用顯示/不透明度。通過 CSS 在元素顯示時設定規則，如果它不可見，則設定它的背景沒有意義：
$(this).[..].show(), $(this).[..].hide() - 我假設你可以用 css 來做到這一點：
.image-wrapper:hover .image-01{display: block;}
uj5u.com熱心網友回復：
建議：
- 對影像使用 id，這樣可以降低 dom 的復雜性。
- 使用兩個單獨的事件（.hover 和 .mouseout）
- 使用箭頭函式而不是 'function' 關鍵字
例子：
$(document).ready(()=>{
$("#image-01").hover(()=>{
/* css code for hover here */
}
$("#image-01").mouseout(()=>{
/* css code for mouseout here */
}
}
編輯：
也許您可以在 div 元素中扭曲所有影像。
然后你可以使用讓影像 = $(' /* 容器 ID */ ').children()
為了得到它的孩子。
然后只需遍歷影像并添加懸停事件
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/395221.html
標籤：javascript 查询 css 徘徊 jquery悬停
上一篇：使用navArgs將Fragment轉換為DialogFragment，如何從Fragment類外部導航到DialogFragment
下一篇：如何在函式中更新陣列