CODEWITHSUNDEEP
csshoveroverflow
learningtech
learningtech

Reputation: 33683

CSS no hover on overflow

Let's say I have an html structure like so

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

And I have the following style sheet

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

When I put my mouse at coordinates 5px,5px, then we see a blue square that is 100px by 100px, which is great. Now I want to put my mouse at coordinates 50px,50px and NOT SHOW the large blue square. Is there a way I can achieve this with just css?

In otherwords, i only want to see a 100px by 100px blue box if my mouse xcoordinate is less than or equal to 10px and ycoordinate is less than or equal to 10px.

Upvotes: 0

Views: 228

Answers (3)

Mooseman
Mooseman

Reputation: 18891

Just shrink the blue square (<span>) to 49x49 (or any size less than 50x50) until a is :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;
}

Fiddle: http://jsfiddle.net/LVcS2/4/

I changed the opacity of a to 0.5 for demo purposes.

Upvotes: 0

Tyler Woerner
Tyler Woerner

Reputation: 11

I was able to get it working like this.

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/

Upvotes: 1

isherwood
isherwood

Reputation: 61063

With an additional element you can get close. The problem is that the parent element (a) stretches to contain its child, if not visually, from the browser's perspective.

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>

Upvotes: 0

Related Questions