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小於或等於10px且ycoordinate小於或等於10px，我只希望看到一個100px by 100px藍框。

Answer 1

有了一個額外的元素，你可以關閉。問題在於父元素（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 2

我能得到它的工作是這樣的。

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 3

就縮水藍色方形（<span>）到49x49（或任何尺寸小於50×50），直到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 SES。