我有5個div，我希望他們填充鼠標懸停上的父div

我有這5個div的，我希望他們填充鼠標懸停的父div我有這些代碼，但他們不推動以前的div（以上）任何地方。我有5個div，我希望他們填充鼠標懸停上的父div

這是HTML代碼：

<div id="photo"> 
<div id="no1"> 
     &nbsp; 
    </div> 
    <div id="no2"> 
     &nbsp; 
    </div> 
    <div id="no3"> 
     &nbsp; 
    </div> 
    <div id="no4"> 
     &nbsp; 
    </div> 
    <div id="no5"> 
     &nbsp; 
    </div>

，這是CSS：

div#photo{ 
margin:10px 0; 
padding:5px; 
width:980px; 
height:300px; 
background-color:rgba(100,100,100,0.5); 
border-radius:20px; 
overflow:hidden;} 

div#no1{ 
background-color:#FF00FF;} 
div#no2{ 
background-color:#FF0;} 
div#no3{ 
background-color:#00F;} 
div#no4{ 
background-color:#0F0;} 
div#no5{ 
background-color:#F00;} 
div#no1, div#no2, div#no3, div#no4, div#no5{ 
width:970px; 
height:61px; 
transition:all 2s;} 
div#no1:hover, div#no2:hover, div#no3:hover, div#no4:hover, div#no5:hover{ 
height:305px;}

來源

2013-09-30 Amin Jafari

分別是jQuery？ – Sergio

make a [fiddle]（http://jsbin.com/） – aldanux

我發現很難理解你的意思是「我有這5個div，我希望它們填充鼠標懸停時的父級div」？ – bitoiu

你可以使用jQuery .mouseenter & .mouseleave事件做你的工作。在這裏，我提出的example

來源

2013-09-30 21:14:12

這正是我想要的，你能告訴我如何使用javascript部分？我在哪裏複製它？ –

@AminJafari請參閱下面的示例以瞭解如何將javascript/jQuery複製到文檔中。然後，請選擇此答案（Eugen Halca的答案）作爲正確答案，因爲他擁有正確的jQuery解決方案。 – gibberish

我無法讓它工作！ :( –

-1

您需要將移動：懸停選擇父和應用樣式到那個州兒童。我不完全清楚你的目標，但這是你如何設計的。祝你好運，讓我知道如果你需要進一步的幫助:)

div#photo:hover > div{ 
    height:305px; 
}

DEMO http://jsfiddle.net/59Uph/

編輯

嘗試沿着這 http://jsfiddle.net/59Uph/2/

來源

2013-09-30 20:38:41

通過這種方式，所有div的高度都達到了305px，我只需要那個人就可以得到它，並且我希望它能填充給定的整個部分！ –

噢，我明白了，好吧！ –

線的東西給每＃ noX id是同一個類，名稱無關緊要。例如：.hoverPic。

$(document).ready(function() { 

    $('.hoverPic').each(function(){ /*pick each element */ 

     $(this).hover(function(){ /* do something on hover */ 

      $(this).css({ /*set css value */ 
       'width': '100%', 
       'height': '100%' 
      }); 

     }); 

    }); 
});

來源

2013-09-30 20:49:29

我從來沒有使用JavaScript或jQuery，並且此代碼有一個sintax錯誤，我不知道如何解決！ –

這是如何實施Eugen的解決方案。請接受他的解答作爲正確的答案，而不是這個。

<html> 
    <head> 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
     <style> 
      div#photo { 
       margin:10px 0; 
       padding:5px; 
       width:980px; 
       height:300px; 
       background-color:rgba(100, 100, 100, 0.5); 
       border-radius:20px; 
       overflow:hidden; 
      } 
      div#no1 {background-color:#FF00FF;} 
      div#no2 {background-color:#FF0;} 
      div#no3 {background-color:#00F;} 
      div#no4 {background-color:#0F0;} 
      div#no5 {background-color:#F00;} 
      div#no1, div#no2, div#no3, div#no4, div#no5 { 
       width:970px; 
       height:61px; 
       transition:all 2s; 
      } 
      .exp {height:305px;} 
     </style> 

     <script type="text/javascript"> 
      $(document).ready(function() { 

       $(".exp").mouseenter(function() { 
        $(".exp").not(this).stop(); 
        $(this).prevAll().animate({ 
         height: "0px" 
        }, 2000, function() { 
         // Animation complete. 
        }); 
        $(this).animate({ 
         height: "305px" 
        }, 2000, function() { 
         // Animation complete. 
        }); 

       }); 
       $(".exp").mouseleave(function() { 
        $(".exp").not(this).stop(); 
        $(".exp").animate({ 
         height: "61px" 
        }, 200, function() { 
         // Animation complete. 
        }); 
       }); 

      }); //END $(document).ready() 

     </script> 
    </head> 
<body> 

    <div id="photo"> 
     <div id="no1" class="exp">&nbsp;</div> 
     <div id="no2" class="exp">&nbsp;</div> 
     <div id="no3" class="exp">&nbsp;</div> 
     <div id="no4" class="exp">&nbsp;</div> 
     <div id="no5" class="exp">&nbsp;</div> 
    </div> 

</body> 
</html>

來源

2013-09-30 20:52:21 gibberish

我其實從來沒有使用JavaScript或jQuery，我該如何使用這些功能？我把它們寫在的但它什麼也沒做！ –

它的工作，TNX :) –

Try this

我已經使用簡單的邏輯，只要施加高度：0到其他分區以外的懸停的div。

來源

2013-10-01 11:15:28 Tushar

我有5個div，我希望他們填充鼠標懸停上的父div

回答

相關問題