Question

当我用鼠标悬停时，我希望将元素大小减少一点效果。然而，这看起来很麻烦，因为随着元素尺寸的减小，“悬停区域”也会变小，这可能导致元素不再被徘徊，这进一步导致这种“大小闪烁”。

是否有适当的方法在悬停时实现元素大小减少，同时保持悬停区域大小相同？没有额外的元素？

这是一个小提琴：https://jsfiddle.net/ahvonenj/88f5by59/

小提琴链接所需的代码：

#di
{
  position: absolute;
  left: 15px;
  top: 15px;
  background-color: #2980b9;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
}

#di:hover
{
  width: 50px;
  height: 50px;
  transition: all 200ms linear;
}

Answer 1

如评论所述，将它包装在div中会更好。但如果不添加其他元素必须，则可以使用伪元素。

将可见部分设为伪元素（如:before），并保留主要部分仅用于悬停：

提示：如果你想要鼠标翻转和翻转的过渡效果，请将属性设置为主css规则，而不是悬停的

#di
{
  position: absolute;
  left: 15px;
  top: 15px;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
}

#di:before {
  content: "";
  display: block;
  background-color: #2980b9;
  width: 100px;
  height: 100px;
}

#di:hover:before
{
  width: 50px;
  height: 50px;
  transition: all 200ms linear;
}

<div id = "di">
</div>

Answer 2

您可以将div包装在容器中并且＆＃34;绑定＆＃34;将悬停事件发送给父母。

P.S显然它是添加其他元素的解决方案。

＆＃13;

#container
{
  position: absolute;
  left: 15px;
  top: 15px;
  box-sizing: border-box;
}

#container, #di{
  width: 100px;
  height: 100px;
}

#di{
  background-color: #2980b9;

}


#container:hover #di
{
  width: 50px;
  height: 50px;
  transition: all 200ms linear;
}

＆＃13;

<div id="container">
  <div id="di">
  </div>
  
</div>

＆＃13;

Answer 3

是的，这是你的答案。你必须再添加一个元素。看到这个小提琴： https://jsfiddle.net/vwy4utf5/

HTML：

<div id = "di">
<div id="diin">
</div>
</div>

CSS

    #di{width:101px; height:101px; cursor:pointer; position: absolute;
    left: 15px;
    top: 15px;}

    #diin
    {

      background-color: #2980b9;
      box-sizing: border-box;
      width: 100px;
      height: 100px;
       transition: all 200ms linear;
    }

#di:hover > div
{
  width: 50px;
  height: 50px;
  transition: all 200ms linear;
}

Answer 4

我尝试使用Jquery，没有由OP指定，但我想它可以帮助某人。

因此改变了css以进行新父级的父级定位：

#di {
  background-color: #2980b9;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
}

#di_parent {
  padding: 0;
  overflow: hidden;
  position: absolute;
  left: 15px;
  top: 15px;
}


#di_parent:hover > DIV {
  width: 50px;
  height: 50px;
  transition: all 200ms linear;
}

然后添加了一些JQuery来为每个对象创建一个容器以保持大小，如上所述。

$('#di').each(function(i, v){
    var o, p;
  o=$(v);
  p=$('<div id="di_parent"></div>');
  p.css({height:o.outerHeight(),width:o.outerWidth()});
  o.after(p); 
  p.append(o.detach());
});

工作小提琴：

https://jsfiddle.net/88f5by59/11/

＆＃13;

$('#di').each(function(i, v){
	var o, p;
  o=$(v);
  p=$('<div id="di_parent"></div>');
  p.css({height:o.outerHeight(),width:o.outerWidth()});
  o.after(p); 
  p.append(o.detach());
});

＆＃13;

#di {
  background-color: #2980b9;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
}

#di_parent {
  padding: 0;
  overflow: hidden;
  position: absolute;
  left: 15px;
  top: 15px;
}


#di_parent:hover > DIV {
  width: 50px;
  height: 50px;
  transition: all 200ms linear;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id = "di">
</div>

＆＃13;

希望它有所帮助！

CSS：在悬停时减少元素大小，但保留原始的“悬停区域”

4 个答案: