Question

我有一个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>

Answer 1

添加了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');
    })

这里是demo http://jsfiddle.net/24ukqr2z/7/

如果你想添加一些css动画，请使用

transition: .5s;

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

在悬停时更改直接兄弟姐妹

1 个答案: