Changing visibility property in css?

Question

<style>
#count2{
visibility:hidden;
}
#count1:hover{
background:#123456;
//how do I change the visibility property of #count2 here?
}
</style>
<div id="count1">My visible element</div>
<div id="count2">My flickering element</div>

My question is clear and might be little weird though. How do I change the visibility property of #count2 to true when somebody hovers on #count1, using only css.

I'm not pretty sure so I post this as a comment. I think this isn't possible without javascript. — Aurelio De Rosa
– Aurelio De Rosa, Commented Nov 11, 2011 at 13:53
When you rollover #count2, you want it to be shown, not hidden? — Charlie
– Charlie, Commented Nov 11, 2011 at 13:53
no i want to manipulate #count2's visibility while hovering on #count1 , is that possible in css, or should i be using jquery? — Jenny Dcosta
– Jenny Dcosta, Commented Nov 11, 2011 at 13:54
@JennyDcosta - As BoltClock mentioned in his answer, it's possible in CSS, but if you need to support IE6, you'll need some Javascript help. (JQuery is, of course, an option.) — DashK
– DashK, Commented Nov 11, 2011 at 14:04

BoltClock · Accepted Answer · 2011-11-11 13:55:01Z

8

Since you're modifying two different elements on hovering one of them, you can use a sibling combinator followed by the #count2 selector in a separate rule for modifying that particular element:

#count2 {
    visibility: hidden;
}

#count1:hover {
    background: #123456;
}

#count1:hover + #count2 {
    visibility: visible;
}

answered Nov 11, 2011 at 13:55

BoltClock

728k165 gold badges1.4k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

BoltClock Over a year ago

If you're unfortunate enough to have to support IE6, you'll have to go with jQuery...

DashK Over a year ago

@JennyDcosta - Which browser are you testing with? This works on FFX 3.5, IE7, IE8 and Chrome... As BoltClock said, if you need IE6 support, you'll need some Javascript help.

Joseph Silber · Accepted Answer · 2011-11-11 14:00:32Z

3

You'll have to use the + selector, which selects adjacent siblings:

#count2 {
    visibility:hidden;
}
#count1:hover {
    background:#123456;
}
#count1:hover + #count2 {
    visibility: visible;
}

Here's the fiddle: http://jsfiddle.net/Yyr64/

If you have to target older browsers, and you're using jQuery, this is what you gotta do:

var $count2 = $('#count2');

$('#count1').hover(function(){
    $count2.css('visibility', 'visible');
}, function(){
    $count2.css('visibility', 'hidden');
});

...and here's the fiddle for this: http://jsfiddle.net/Yyr64/1/

edited Nov 11, 2011 at 14:00

answered Nov 11, 2011 at 13:55

Joseph Silber

221k59 gold badges369 silver badges292 bronze badges

2 Comments

Joseph Silber Over a year ago

@Jenny Dcosta - Sure. You'll just have to alter the selectors.

BoltClock Over a year ago

@Jenny Dcosta: Did you check the links Joseph posted? If his links work but your code doesn't, you might want to show us your exact code if it's different from what you posted.

Larry · Accepted Answer · 2011-11-11 14:14:24Z

1

The above solutions can be abstracted with the following jsfiddle: http://jsfiddle.net/mousepotatoweb/PVHzK/2/

<style>
[id|="count-1"]{
background:#123456;
}

[id|="count-2"]{
visibility:hidden;

}

[id|="count"]:hover ~ [id|="count"] { visibility: visible;}
</style>

<div id="count-1">My visible element</div>
<div id="count-2">My flickering element</div>

edited Nov 11, 2011 at 14:14

answered Nov 11, 2011 at 14:04

Larry

1,2362 gold badges20 silver badges25 bronze badges

2 Comments

BoltClock Over a year ago

Be careful - :nth-of-type() looks at element type, not attribute. Combining attribute selectors with :nth-of-type() may cause unexpected results.

Larry Over a year ago

ye, edited it out - was going a bit nuts with pseudo selectors. Thanks for heads up.

Tim B James · Accepted Answer · 2011-11-11 14:03:20Z

0

count2 would need to be a child of count1 in order to do this via css only.

<div id="count1">
    My visible element
    <div id="count2">My flickering element</div>
</div>

#count1:hover #count2{ display: block; background: #ffff00; }
#count2{ display: none; }

When using css2 though, you can use the + selector as in Joseph Silber's answer

edited Nov 11, 2011 at 14:03

answered Nov 11, 2011 at 13:56

Tim B James

20.4k4 gold badges77 silver badges108 bronze badges

Comments

student · Accepted Answer · 2011-11-11 13:56:29Z

-1

Use

 display:none;

instead of visibility property.

You can take a look at jquery http://api.jquery.com/show/

answered Nov 11, 2011 at 13:56

student

2132 silver badges5 bronze badges

1 Comment

Larry Over a year ago

using the visibility property will retain the structure of the layout. display: none; will result in elements filling the space as long as the element is set to none. May not be viable for the question asker to use display: none;

Collectives™ on Stack Overflow

Changing visibility property in css?

5 Answers 5

2 Comments

2 Comments

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

2 Comments

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related