在懸停，div接管整個李

我有一個無序列表，每個li包含一個img和一個div。我的目標是盤旋在div上會讓img做點事情。現在它只是添加/刪除類，但這是一個佔位符。添加/刪除的作品，但它不是問題（但如果你有關於這方面的提示，總是樂於從更有經驗的人那裏獲得輸入）。在懸停，div接管整個李

問題是盤旋時盤旋突然擴大以填充整個李，並且似乎暫時失去其上部填充。這意味着當這個div被一個奇特的按鈕取代時......按鈕可能會像當前的純文本一樣跳轉。

的HTML：

<ul id="headmenu"> 
    <li id="kite1"> 
     <img src="img/kitesani1a.png" id="kites1a" /> 
     <div id="attend" class="headmenulink">attending</div> 
    </li> 
</ul>

的CSS：

ul#headmenu { margin: 2em 0 0 0; padding: 0; } 
ul#headmenu li { margin: 0 1% 0 0; padding: 0; width: 19%; float: left; display: inline; list-style: none;} 
ul#headmenu img { padding-bottom: 5em; position: relative; top: 0; left: 0; z-index: 100; } 
li .headmenulink { padding-top: 2em; position: relative; bottom: 0; left: 0; border:1px solid blue; } 

ul#headmenu li img { 
    transition-duration: 0.8s; 
    transition-property: transform; 
} 

.kite1ahover { 
    float: right; 
    position: relative; 
    -webkit-transform:rotate(10deg); 
    -moz-transform:rotate(10deg); 
}

（在現場版本中，CSS是更詳細。）最後，jQuery的位目前的草案：

$("#attend").hover(function(){ 
    $("#kites1a").addClass('kite1ahover').delay(500).queue(function(next){ 
     $(this).removeClass('kite1ahover'); 
     next(); 
});

我做了一個jsfiddle，但它給了我奇怪的錯誤。不知道它是否可以編輯，但以防萬一，這是在http://jsfiddle.net/klh02/5UMK5/7/ - 然後我也做了一個精簡的真實世界的例子，在http://www.karinoyo.com/temp/index.php。如果你打開實時版本（不是小提琴），你會看到懸停時展開的臨時藍色邊框，同時文本跳起一兩行。（注意：唯一'活'懸停在'參加'裏，左起第一個裏。）

是因爲CSS擴展div嗎？或者是因爲jQuery？或者這只是發生在這種情況下的事情，我需要做一些創造性的定位讓div保持放置而不是展開/跳躍？

在此先感謝！

來源

2012-12-26 kl02

在id選擇器之前使用'ul'是不必要的（我錯了），因爲id是唯一的。 – SeinopSys

這本身並不是錯誤的，它只是多餘的（主要是爲了在草稿中自己的薰陶，這正是我現在的想法）。在上線之前我會清理乾淨，但即使它仍在，我的理解是它不會是一個重要的問題。 – kl02

在你擺弄的DIV增長，因爲懸停類有內浮動：

.kite1ahover { 
    float:right; /* remove this */ 
    position: relative; 
    -webkit-transform:rotate(10deg); 
    -moz-transform:rotate(10deg); 
    -o-transform:rotate(10deg); 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
    filter: alpha(opacity=100); 
    -moz-opacity:1; 
    -khtml-opacity: 1; 
    opacity: 1; 
}

打破了框的高度。一旦你刪除它，DIV停止增長。的「奇怪」的錯誤，您得到了來自於jQuery代碼缺少右括號：

$(document).ready(function(){ 
    $("#attend").hover(function(){ 
     $("#kites1a").addClass('kite1ahover').delay(500).queue(function(next){ 
      $(this).removeClass('kite1ahover'); 
      next(); 
     }); 
    }); 
// missing brackets here... 
});

你會發現工作變種here。

來源

2012-12-26 23:48:12

是的，正如我在上面回覆的那樣，我從今年晚些時候獲得了另一個項目的c＆p代碼導致的愚蠢錯誤。一旦我意識到這一點，並刪除浮動，一切都表現。另外，哈哈在奇怪的jsfiddle錯誤。謝謝！ – kl02

的彈跳是因爲你做的IMG浮與「kite1ahover」類

當元素浮動，它們佔據被忽略（因爲如果他們是空心的）的大小等等股利成爲了頂級元素盒子，因此跳到頂部。

如果停止使用浮動，而使用左，右，上，下的組合，你應該能夠移動IMG的，只要你願意

例如 position:relative; left:100px;

來源

2012-12-26 23:45:55

是的，我剛纔意識到這一點。我贏得了夜晚的愚蠢錯誤！走吧。爲我提供了一個簡單的插件，從另一個項目中提取一些代碼。你是對的，一旦我把它拿出來，這種奇怪的行爲就停止了。 – kl02

在懸停，div接管整個李

回答

相關問題