I have a div and inside this rectangle boxes are appended. when i hover on a box the size of this box become larger. Now I want two boxes beside hovered box will aslo be large, but smaller than hover one. What is the solution?
Code:
<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>
added 1 line css like following
.big{transform:scale(1.1,1.1);}
and using 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');
})
here is demo http://jsfiddle.net/24ukqr2z/7/
if you want to add some css animation, use
transition: .5s;
demo with animation http://jsfiddle.net/24ukqr2z/8/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.