css - CSS没有悬停在溢出

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，100px这​​很棒。现在我想把鼠标放在坐标上50px，50px而不是显示大的蓝色方块。有没有办法只用 css 来实现这一点？

换句话说，如果我的鼠标 xcoordinate 小于或等于并且 ycoordinate 小于或等于，我只想看到一个100px100px 的蓝色框。10px10px

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

只需将蓝色方块 ( <span>) 缩小到 49x49（或任何小于 50x50a的尺寸），直到: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用于演示目的。

Answer 3

使用附加元素，您可以接近。问题在于，从浏览器的角度来看，父元素 (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>