製作一個整個div轉換懸停

我有圖像懸停工作正常，但它只會改變顏色，一旦它懸停結束。就像我想要div一旦徘徊，它會改變圖像。製作一個整個div轉換懸停

我不想將鼠標懸停在圖片本身上，它只是變化，它正在做什麼。

HTML：

<div class="navigation-box">          
     <div class="sidehead"><i class="lock"></i>header 1</div>         
      <div class="navLinks"> 
       <ul class=""> 
        <li>1</li> 
        <li>2</li> 
        <li>3</li> 
       </ul> 
      </div>   
</div>

CSS：

.lock { 
    background: url('../images/lock.png') no-repeat center; 
    display: inline-block; 
    width: 30px; 
    height: 30px; 
    text-align: center; 
    vertical-align: middle; 
    margin-top:-5px; 
    margin-left:5%; 
} 

li:hover .lock{ 
    background: url("../images/lock-hover.png") no-repeat center;  
}

Fiddle

在小提琴，你就會明白我說的。我只是想要div sidehead曾經懸停，改變lock圖片。任何想法是什麼，我做錯了？

來源

2014-10-31 kris

替換圖像是白色的白色......所以你不能看到它 - http：// jsfiddle.net/acvLkepv/ – 2014-10-31 21:49:06

讓我澄清。你想在懸停後永久改變嗎？這樣，如果你將鼠標移出元素，它仍然是白色圖像？ – 2014-10-31 21:51:17

我知道。那不是我說的，哈哈！我試圖將它放在我將鼠標懸停在「標題1」上的位置，並且圖像將會更改。它不這樣做。我必須去看圖像本身才能看到圖像的變化。我想能夠懸停在div上的任何地方，它會改變這個圖像。 – kris 2014-10-31 21:52:12

您的選擇器有點不對。

如果你想要的東西，當你將鼠標懸停在.sidehead DIV，那你必須把懸停

.sidehead .lock { 
 
    background: url('http://uploadir.com/u/il2433z4') no-repeat center; 
 
    display: inline-block; 
 
    width: 30px; 
 
    height: 30px; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    margin-top:-5px; 
 
    margin-left:5%; 
 
} 
 
.sidehead:hover .lock { 
 
    background: grey url("http://uploadir.com/u/4js58y48") no-repeat center; 
 
} 
 
.sidehead { 
 
    border:1px solid green; /* for visual refernece */ 
 
}

<div class="navigation-box"> 
 
    <div class="sidehead"><i class="lock"></i>header 1</div> 
 
    <div class="navLinks"> 
 
     <ul class=""> 
 
      <li>1</li> 
 
      <li>2</li> 
 
      <li>3</li> 
 
     </ul> 
 
    </div> 
 
</div>

來源

2014-10-31 21:58:50

這不起作用，因爲CSS can't select a parent。當你將鼠標懸停在列表項上時，你的CSS會讀取，孩子.lock會做一些事情。這是jQuery的進來你可以寫這樣的事情：

$('li').hover(function(){ 
    $('.lock').addClass('newClass'); 
});

CSS：

.newClass { 
    background: url("../images/lock-hover.png") no-repeat center; 
}

這只是一個例子，當你徘徊名單之外，但它應該不包括幫助移動事物。

來源

2014-10-31 21:52:37 austinthedeveloper

您可以使用JavaScript的情況發生。所以，你可以使用mouseout和mouseover事件懸停工作：

$(".navigation-box").mouseover(function(){ // White image 
    $(".lock").css("background"," url('http://uploadir.com/u/4js58y48') no-repeat center") 
}); 
$(".navigation-box").mouseout(function(){ // Black image 
    $(".lock").css("background"," url('http://uploadir.com/u/il2433z4') no-repeat center") 
});

Here is an example。注意我改變了身體的背景顏色，所以變化很明顯。

或者，你可以這樣做：

.navigation-box:hover > .sidehead > .lock { 
    background: url("http://uploadir.com/u/4js58y48") no-repeat center; 
}

For example

來源

2014-10-31 22:02:02

您可以輕鬆地做到這一點使用jQuery

我會建議給你立一個類（或UL）

$('li').on('mouseenter mouseleave', function(e) { 
    $('.lock').trigger(e.type); 
});

此代碼將觸發每個.lock對象的懸停事件，當li是徘徊（添加ID和/或類，如果你想使它更精確一些，但應該是非常直接）

來源

2014-10-31 22:03:03

製作一個整個div轉換懸停

回答

相關問題