CSS：在悬停时减小元素大小，但保持原始大小 "hover area"

Question

当鼠标悬停在元素上时，我想稍微减小元素大小作为效果。然而，这看起来有问题，因为随着元素尺寸的减小，"hover area" 也会变小，这可能导致元素不再悬停，进一步导致 "size flickering".

是否有适当的方法来减少悬停时的元素大小，同时保持悬停区域大小不变？没有额外的元素？

这是一个fiddle：https://jsfiddle.net/ahvonenj/88f5by59/

fiddle 链接所需的代码：

#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 包装在容器中，并将悬停事件 "bind" 传递给父级。

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

#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;
}

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

Answer 3

是的，这就是你的答案。您必须再添加一个元素。看到这个 fiddle： 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());
});

工作fiddle：

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

$('#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());
});

#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;
}

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

希望对您有所帮助！

CSS：在悬停时减小元素大小，但保持原始大小 "hover area"

CSS: Reduce element size on hover, but keep original "hover area"

html

css

hover