希望有圖像翻轉（第一懸停狀態），在第二懸停狀態的背景圖像懸停

我有這些下面的代碼中，我希望啓用第二懸停狀態下施加到被放置在第一懸停狀態的某些按鈕box div - 因此，當用戶懸停box div時，按鈕會出現在第一個懸停狀態，然後當用戶將該按鈕懸停在box div或span元素中時，該按鈕會在第二懸停狀態中更改爲外觀明亮。希望有圖像翻轉（第一懸停狀態），在第二懸停狀態的背景圖像懸停

這可能很容易做到和完成嗎？我已經使用Jquery和DOM，但它沒有工作。

HTML：

<div class="product"><a href="#"><span><img src="images/more-details.png"/></span><img src="images/product.jpg" width="220" height="195" alt="product"/></a></div>

CSS：

.product{width:220px; height:195px; float:left; margin-right:18px;margin-bottom:24px; position:relative; } 

.product span{width:220px; height: 195px; position:absolute; visibility:hidden; background: url("images/more-details.png") no-repeat;} 

.product span a{width:220px; height: 195px; position:absolute; visibility:hidden; display:block; overflow:hidden; background: url("images/more-details.png") no-repeat;} 

.product span a:hover{width:220px; height: 195px; position:absolute; visibility:hidden; display:block; overflow:hidden; background: url("images/more-details-over.png") no-repeat;} 

.product span:hover{visibility: visible;} 

.product span.show{visibility: visible;}.product span.hide{visibility: hidden;} 

.product span img{visibility: hidden;} 

.product span img showimg{visibility: visible;} 
.product span img hideimg{visibility: hidden;}

JQuery的：

$(".product").hover(
      function() { 
       $(this).find('span').toggleClass('show'); 
      }, 
      function(){ 
       $(this).find('span').toggleClass('hide'); 
      } 
     ); 
     $(".product span").hover(
      function() { 
       $(this).find('img').toggleClass('showimg'); 
      }, 
      function(){ 
       $(this).find('img').toggleClass('hideimg'); 
      } 
     );

來源

2011-12-08 user1087834

你有沒有試着做了'$（「產品跨度」）第一懸停之外hover'，因爲我不知道你是否能鏈是這樣！？還有一點建議，當你說'xy不工作'時，描述什麼不起作用，爲什麼！ – Anonymous

嗨Dan @DanSurfrider，謝謝你的評論。關於什麼是「不工作」的問題，我的意思是，標籤必須始終在div裏面那麼當標籤徘徊，那麼元素或類似元素（一個按鈕出現上面的影像）將顯示在以上該圖像，然後再次，當徘徊時，該按鈕將更改爲其自己的懸停狀態 - 換句話說就是在按鈕中變爲明亮的顏色。我假設這個按鈕可以被包含在圖片上方最高zindex的span元素中（嵌入在.product div中）。 – user1087834

@DanSurfrider一兩件事，我本來想在WordPress的電子商務使用的代碼如上所以這就是爲什麼需要jQuery來添加範圍，併爲動態生成並插入到「頁」每個產品圖像按鈕懸停。因爲每次我在wp電子商務中添加新產品時，產品圖像都會出現在頁面的標籤中，但我不確定如何在產品圖像的第一個懸停中將按鈕更改爲其自己的按鈕狀態（在第2個徘徊）。 – user1087834

，而不是使用toggleClass。你試過$（'[element]'）。show（）和$（'[element]'）。hide（）？或者你也可以從

display:none;

到

display:block;

希望更改CSS，這將有助於

來源

2011-12-08 14:00:18

如果我正確理解你的問題，我不認爲你需要jQuery來實現你的目標：http://jsfiddle.net/z6sgY/1/

來源

2011-12-08 14:08:11 ptriek

感謝ptriek。您在理解問題時幾乎是正確的，但是，我希望產品懸停的是產品div需要在裏面有標籤，而不是其中的任何div。這是因爲我在哪裏圖片是動態生成的，當我增加了新的產品，使代碼看起來像這樣加載WordPress的電子商務工作：

但我相信，如果我能正確絕對位置應用標籤，可以在相同的結果取得成就？ – user1087834

我只是用div的快速演示，您可以確實是由IMG更換內部的div - 應該工作完全一樣.. – ptriek

謝謝ptriek，你在提供演示所做的是對我來說非常有幫助，我不得不修改代碼和CSS一一點點實現我的目標。謝謝！ – user1087834

希望有圖像翻轉（第一懸停狀態），在第二懸停狀態的背景圖像懸停

回答

相關問題