CODEWITHSUNDEEP
css
noWayhome
noWayhome

Reputation: 668

why doesn't my basic CSS code for hide and display work?

Im using google chrome and i want that profile text with the background to disappear when i hover over it. but alas it doesn't... i'm sure im doing something fundamentally wrong. please explain

HTML

<body>
<div id ="pictures">
profile
</div>

CSS

#pictures {
    height: 100px;
    width: 200px;
    display: block;
    background-color:#FCC;
}
#pictures:hover {
    display: none;
}

Upvotes: 0

Views: 56

Answers (2)

thirtydot
thirtydot

Reputation: 228182

You'd be better off using opacity: 0 to avoid any weirdness (as already explained by Danjah).

http://jsfiddle.net/UenGP/2/

#pictures:hover {
    opacity: 0;
    filter: alpha(opacity=0);
}

Upvotes: 5

danjah
danjah

Reputation: 3059

If you hover over the #pictures element, it is then removed, therefore you are no longer hovering over it. In Firefox I see a flicker, in Chrome, perhaps the flicker is so fast you don't see it disappear only to reappear again.

Upvotes: 1

Related Questions