懸停時更改直系兄弟姐妹
[英]Change immediate siblings on hover
問題描述
我有一個div，在此矩形框內附加了。 當我將鼠標懸停在一個盒子上時，這個盒子的尺寸會變大。 現在，我希望懸停的框旁邊的兩個框也較大，但小於懸停的框。 解決辦法是什么？
碼：
<html>
<head>
<link href="css/newcss.css" rel="stylesheet" />
</head>
<body>
<script src="ajax.googleapis.com/ajax/libs/jquery/1.11.0/…;
<script type="text/javascript" src="js/newjavascript.js" ></script>
<button onclick="createElem();" >Add Neew Boxes</button>
<div id="demo"></div>
</body>
</html>
1 個解決方案
解決方案1
0 已采納 2014-12-14 06:43:31
添加了1行CSS，如下所示
.big{transform:scale(1.1,1.1);}
並使用javascript
$(document).on('mouseenter','.boxes', function () {
$(this).next('.boxes').addClass('big');
$(this).prev('.boxes').addClass('big');
}).on('mouseleave','.boxes', function(){
$(this).next('.boxes').removeClass('big');
$(this).prev('.boxes').removeClass('big');
})
這是演示http://jsfiddle.net/24ukqr2z/7/
如果要添加一些CSS動畫，請使用
transition: .5s;
jQuery計算寬度並在懸停時更改同級
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.