Question

假设我有一个像这样的HTML结构

<a><span></span></a>

我有以下样式表

a {
    position:absolute;
    opacity:0;
    width:10px;
    height:10px;
    display:block;
}
a:hover {
    opacity:1;
}
span {
    position:absolute;
    width:100px;
    height:100px;
    display:block;
    background:blue;
}

当我将鼠标放在坐标5px，5px处时，我们会看到100px的{{1}}蓝色方块，这很棒。现在我想将鼠标放在坐标100px，50px上，而不是显示大的蓝色方块。有没有办法只用css来实现这个目标？

换句话说，如果我的鼠标xcoordinate小于或等于50px且ycoordinate小于或等于100px，我只想看到10px乘100px蓝框。

Answer 1

我能够让它像这样工作。

a {position:relative; width:10px; height:10px; display:block;}

span {display:none;}

a:hover span {position:absolute; width:100px; height:100px; display:block; background:blue;}

http://jsfiddle.net/isherwood/LVcS2/3/

Answer 2

使用额外的元素，您可以接近。问题是，从浏览器的角度来看，父元素（a）可以伸展以包含其子元素（如果不是可视的话）。

http://jsfiddle.net/isherwood/LVcS2/2/

div {
    width: 100px;
    height: 100px;
    background: green;
}
a {
    width:10px;
    height:10px;
    display:block;
    background:red;
}
span {
    display:block;
    background:blue;
}
a:hover span {
    width: 100px;
    height: 100px;
}

<div>
    <a><span></span></a>
</div>

Answer 3

只需将蓝色方块（<span>）缩小到49x49（或任何小于50x50的大小），直到a为:hover：

a{
    position:absolute;
    opacity:0.5;
    width:10px;
    height:10px;
    display:block;
}
a:hover{
    opacity:1;
}
a:hover span{
    width:100px;
    height:100px;
}
span{
    position:absolute;    
    width:49px;
    height:49px;
    display:block;
    background:blue;
}

小提琴：http://jsfiddle.net/LVcS2/4/

为了演示目的，我将a的不透明度更改为0.5。

CSS没有悬停溢出

3 个答案: