css hide button until div hover

Question

We want to hide button until we hover over the div layer.

Essentially, I would like to be able to apply this to other elements also, but this will do for now, any help appreciated

score 18 · Answer 1 · answered Sep 26 '11 at 02:12

18

Simply use the :hover pseudo-class on the outer div:

.resultContainer .viewThisResult {
    display: none;
}
.resultContainer:hover .viewThisResult {
    display: inline;
}

Here's the fiddle: http://jsfiddle.net/dTLaF/1/

answered Sep 26 '11 at 02:12

Joseph Silber

214,931
59
362
292

score 13 · Accepted Answer · answered Sep 26 '11 at 02:12

13

.resultContainer:hover .viewThisResult { display: block; }

:hover pseudoselector on the parent. Though it's nice when the code for the question is included in the question, for posterity.

answered Sep 26 '11 at 02:12

Annika Backstrom

13,937
6
46
52

2

thanks, you forgot: .viewThisResult {display:none} but cheers , works a charm – 422 Sep 26 '11 at 02:15
Right, sorry. Had it in the fiddle, which I failed at linking too and gave up on too quickly. :) – Annika Backstrom Sep 26 '11 at 02:17
2

Note that this will make your button inaccessible to keyboard-only users. You should also display the element on `:focus` or `:focus-within`. – AJ Richardson Jan 13 '21 at 21:04

score 0 · Answer 3 · answered Nov 11 '22 at 03:56

when using this feature and trying to hover most of the time it doesn't work because when something is hidden it is no longer there to activate hover, the simplest way to solve this is by making it transparent and using hover to remove the transparency.

css hide button until div hover

3 Answers3