[英]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行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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.