Jquery在Chrome中切換寬度/高度

此代碼一直在Chrome中運行，直到現在v32.0.1700.76 m。現在，當我將display屬性切換到內聯（打算讓元素可見）時，它將元素的寬度和高度都設置爲-10px。它的工作原理與Firefox一樣，並一直在Chrome中......直到現在。我甚至嘗試將寬度和高度硬編碼到.on類中，但是這被某種方式覆蓋。Jquery在Chrome中切換寬度/高度

<style> 
.on {display: inline; width: 35px; height: 35px} 
.off {display: none} 
</style> 

<div style="width:300px" class="featImage"> 
<img width="300" height="250" src="http://thumbs.fliqz.com/622f3b4c6abd4845a17ca177bc27cc95.jpg"> 

<div id="fav" style="width: 35px; height: 35px; padding: 10px 10px 0 0; background: red; margin: -257px 0 0 250px; float: right; position: relative; z-index: 10;"></div> 
</div> 

<script> 

$(document).ready(function(){ 

$(".featImage").hover(
    function() { 
    $('#fav').removeClass('off').addClass('on'); 
    }, 
    function() { 
    $('#fav').removeClass('on').addClass('off'); 
    } 
); 

}); 

</script>

來源

2014-01-18 user3208564

http://jsfiddle.net/tXmsE/3/如果您將紅色方塊的位置設置爲絕對，它將工作...我不知道是什麼導致了問題... – sinisake

http://jsfiddle.net/tXmsE/4/

浮動圖像左，它會工作。

<img style="float:left;" width="300" height="250" src="http://thumbs.fliqz.com/622f3b4c6abd4845a17ca177bc27cc95.jpg">

而且，這可能是問題，太：

display:inline resets height and width

此外，您還可以刪除浮動（S）：

http://jsfiddle.net/tXmsE/6/

（因爲你已經定位的元素帶邊距和填充...）

但是，對於我的口味 - 這是最乾淨的解決方案：http://jsfiddle.net/tXmsE/3/（位置：絕對）

來源

2014-01-18 01:28:08 sinisake

Jquery在Chrome中切換寬度/高度

回答

相關問題