Question

当我移动另一个div时，我想扩大div。如果我像这样设置div的新维度，它工作正常：

function enlarge(i) {
     if(jsmolwindow[i]===true){
         divname="jsmolwindow"+i;
         document.getElementById(divname).style.height='350px';
         document.getElementById(divname).style.width='350px';
     }
}

但我想放大30px或30％没有设定一定的尺寸。我没有成功这样做。

感谢您的帮助。

Answer 1

为什么不使用CSS3：hover伪选择器？例如div:hover div.2(//code}。

有一个css属性transform: scale(1.3)，每次将div增加30％，而不会有任何时髦的数学;）

Answer 2

这样的东西对你有用吗？您可以使用jquery在css中执行transforms。我使用了类.enlargeMe来定位哪些元素变大，而.div1作为我的目标悬停在div上以触发扩大其他div。

（ps。.hover()有时在浏览器中看起来很挑剔，如果鼠标在元素上移动得太快。这就是为什么我选择使用.mouseenter()和.mouseleave()）

$(document).ready(function() {
  $('.div1').on('mouseenter', function() {
    $('.enlargeMe').css({
      '-webkit-transform' : 'scale(1.3)',
      '-moz-transform'    : 'scale(1.3)',
      '-ms-transform'     : 'scale(1.3)',
      '-o-transform'      : 'scale(1.3)',
      'transform'         : 'scale(1.3)',
    });
  });
  $('.div1').on('mouseleave', function() {
    $('.enlargeMe').css({
      '-webkit-transform' : 'scale(1)',
      '-moz-transform'    : 'scale(1)',
      '-ms-transform'     : 'scale(1)',
      '-o-transform'      : 'scale(1)',
      'transform'         : 'scale(1)',
    });
  });
});

div {
  display: inline-block;
  width: 200px;
  height: 200px;
  border: 1px solid gray;
  margin-right: 60px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br/><br/>
<div class="div1">This is div 1</div>
<div class="div2 enlargeMe">This is div 2</div>
<div class="div3 enlargeMe">This is div 3</div>

所有-webkit内容都适用于跨浏览器。如果你知道你正在迎合哪些浏览器，你可以消除一些代码。最简单的形式是：

.css('transform', 'scale(1.3)');

鼠标悬停放大div

2 个答案: