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

【问题标题】：CSS: Reduce element size on hover, but keep original "hover area"CSS：在悬停时减小元素大小，但保留原始“悬停区域”
【发布时间】：2016-03-15 19:17:23
【问题描述】：

当用鼠标悬停在元素上时，我想稍微减小元素大小作为一种效果。但是，这看起来有问题，因为随着元素尺寸的减小，“悬停区域”也会变小，这可能导致元素不再悬停，从而进一步导致这种“尺寸闪烁”。

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

这是一个小提琴：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;
}

【问题讨论】：

我们需要看看这个元素到底如何。请提供一些代码。
不...不是没有另一个元素来保持悬停。我可能会使用包装元素。或 javascript。
将元素包装在一个 DIV 中并将鼠标悬停在 THAT 上。当悬停触发时，您可以更改所需的任何元素。如果需要，您可以更改屏幕另一侧的对象。
@LcSalazar 添加了小提琴。

标签： html css hover

【解决方案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>

【讨论】：

刚尝试解决durbpoisn建议：jsfiddle.net/ahvonenj/505d0eat我更喜欢这个伪元素解决方案！
是否可以使用伪元素，如果悬停的元素不是矩形，而是像一些svg元素，例如svg路径？
是的，伪元素将充当任何其他元素，您可以使用其中的所有 css 属性

【解决方案2】：

您可以将 div 包装在容器中并将悬停事件“绑定”到父级。

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>

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案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/

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

希望对你有帮助！

【讨论】：