悬停时更改直系兄弟姐妹

Question

I have a div and inside this rectangle boxes are appended. 我有一个div，在此矩形框内附加了。 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>

Answer 1

added 1 line css like following 添加了1行CSS，如下所示

.big{transform:scale(1.1,1.1);}

and using javascript 并使用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/ 这是演示http://jsfiddle.net/24ukqr2z/7/

if you want to add some css animation, use 如果要添加一些CSS动画，请使用

transition: .5s;

demo with animation http://jsfiddle.net/24ukqr2z/8/ 动画演示http://jsfiddle.net/24ukqr2z/8/

悬停时更改直系兄弟姐妹

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-12-14 06:43:31

悬停时更改直系兄弟姐妹

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-12-14 06:43:31

解决方案1
0 已采纳 2014-12-14 06:43:31