將另一個div懸停時將懸停狀態應用於多個div

我正在尋找一種方法，以便在另一個div用鼠標懸停時將懸停狀態應用於我的頁面上的div選擇。將另一個div懸停時將懸停狀態應用於多個div

希望這個代碼將有助於解釋什麼，我需要一個好一點......

CSS 
#hovered_div { 
position:absolute; 
width:50px; 
height:50px; 
margin-top:25px; 
margin-left:25px; 
background-color:blue; 
} 
#hovered_div:hover { 
background-color:red; 
} 

#div1 { 
position:absolute; 
width:50px; 
height:50px; 
margin-top:100px; 
margin-left:100px; 
background-color:yellow; 
} 
#div1:hover { 
background-color:green; 
width:75px;  
} 

#div2 { 
position:absolute; 
width:50px; 
height:50px; 
margin-top:100px; 
margin-left:25px; 
background-color:pink; 
} 
#div2:hover { 
background-color:black; 
height:250px;  
} 

#div3 { 
position:absolute; 
width:50px; 
height:50px; 
margin-top:25px; 
margin-left:100px; 
background-color:purple; 
} 
#div3:hover { 
background-color:grey; 
width:150px;  
} 

HTML 

<div id="hovered_div"></div> 
<div id="div1"></div> 
<div id="div2"></div> 
<div id="div3"></div>

jsFiddle

那麼，我希望能實現的是，當「hovered_div」懸停與鼠標，該div的懸停狀態，其他三個div應用，當鼠標移動，他們都恢復正常。

任何人都可以幫我嗎？

來源

2012-12-17 Flickdraw

剛使用'.hover（inFunction，outFunction）'方法，並使用'.css（「propery」，「value」）應用樣式。因爲一切都在做不同的事情，所以沒有真正聰明的方式來應用樣式或任何東西 – thatidiotguy

這樣的事情？ http://jsfiddle.net/jcalonso/cX7UC/1/ – jcalonso

@jcalonso - 這很好，謝謝！ – Flickdraw

我會推薦使用CSS類而不是：hover。這將允許您在鼠標懸停和鼠標懸停時設置類屬性。 JS Fiddle Example

$('#hovered_div').mouseover(
    function() { 
     $('#div1').attr('class','hover'); 
     $('#div2').attr('class','hover'); 
     $('#div3').attr('class','hover'); 
    }); 

$('#hovered_div').mouseout(function() { 
$('#div1').attr('class',''); 
    $('#div2').attr('class',''); 
     $('#div3').attr('class',''); 

});

你必須你的CSS更改爲以下（變化 '：懸停' 到 '.hover'）

#div1.hover { 
background-color:green; 
width:75px;  
}

修訂的方式做同樣的

$("#hovered_div").mouseover(function() { 
    $('#div1').attr('class', 'hover'); 
    $('#div2').attr('class', 'hover'); 
    $('#div3').attr('class', 'hover'); 
}).mouseout(function() { 
    $('#div1').removeClass('hover'); 
    $('#div2').removeClass('hover');  
    $('#div3').removeClass('hover'); 

});

來源

2012-12-17 19:06:14 BlueBird

正是我在找什麼，我也可以保留一個：懸停部分，讓div獨立運行，然後懸停部分爲分組懸停狀態。謝謝！ – Flickdraw

實際上，使用.hover（function（）似乎更有效率，就像在jcalonso的jsfiddle中一樣，但它與使用class的方法相同：hover – Flickdraw

同意......我沒有意識到有一個.toggleClass – BlueBird

:hover效果只能應用於子元素。

來源

2012-12-17 18:35:02

將另一個div懸停時將懸停狀態應用於多個div

回答

相關問題