hide/unhide HTML portions by hovering?

Question

more precisely, I've seen websites where there's a kind of header image, which loops through 3-4 different images, and each image is referenced by a dot, and you can pick the image you want by clicking the dot as well. I'm sure everyone has seen this somewhere. as an example, go to http://www.tsunamitsolutions.com/

my question is, how do I make these dots appear/disappear when I hover on the image (like on the site I shared above) is it javascript or can this be accomplished just in the CSS with the "hover" style.

In other words, can hovering over one html portion/div/section make another div/section appear/disappear just by using CSS?

It can be done with either, I will try and get a CSS answer for you. have you a example of your current slider ? — Beep, Jul 25 '14 at 16:40
Hi sorry, no I havent tried it myself yet because I wasn't sure how to implement it — Abdul Ahmad, Jul 25 '14 at 16:40
`#sliderContainer #buttonContainer { display: none; }` `#sliderContainer:hover #buttonContainer { display: block; }` — Luke, Jul 25 '14 at 16:41
See this [question](http://stackoverflow.com/questions/5210033/show-div-on-hover-with-only-css) for more info — Kade Keith, Jul 25 '14 at 16:45

score 1 · Accepted Answer · answered Jul 25 '14 at 16:44

1

It can be done in the CSS.

Assuming the dots/arrows are child elements of banner container, you can do something like:

.bannerContainerClass .dotClass {
   display: none;
}

.bannerContainerClass:hover .dotClass {
   display: block;
}

You can also do it in jQuery if you need effects like fade:

$(".bannerContainerClass").hover(function() {
   $(this).children(".dotClass").fadeIn(500);
}, function() {
   $(this).children(".dotClass").fadeOut(500);
});

The jQuery method can be modified to work even if the dots aren't children of banner container.

answered Jul 25 '14 at 16:44

Brent Waggoner

548
3
14

I see, thank you, so if anything is not a child of the same container, Javascript is required? – Abdul Ahmad Jul 25 '14 at 16:46
1

Note that `display:none` collapses the space. If you use `opacity:0` you won't have that problem. – Casey Falk Jul 25 '14 at 16:52
@AbdulAhmad: Yes, but more correctly, the element must be a "descendant" of the hover-container (or else you simply can't select it with CSS). It doesn't have to be a direct child. – Casey Falk Jul 25 '14 at 16:54
Thanks, Casey. I should have clarified. – Brent Waggoner Jul 25 '14 at 17:11

score 1 · Answer 2 · answered Jul 25 '14 at 17:02

1

You can accomplish it using Jquery and javascript. As in any website header images there is a tag for image one tag for collection of those points. Suppose.

<div id="header_image"> ..code for header image.. </div> which is header tag. and there is a tag which cointains the points.

<div id="points_container"> ..code for points... </div>

Now in its javascript code if you want to disappear "points_container" tag when mouse is hovered over "header_image".and appears again when mouse is hovered out, you can write in its Javascript code.

$(document).ready(function(){
$("#header_image").hover(function(){
$("#points_container").hide();
},function(){
$("points_container").show();
});
});

answered Jul 25 '14 at 17:02

user3765023

77
10

Try reading OP's question, amigo. ;) *"In other words, can hovering over one html portion/div/section make another div/section appear/disappear **just by using CSS**?"* – Casey Falk Jul 25 '14 at 17:03
sorry !! have no idea how to do it in CSS :( – user3765023 Jul 25 '14 at 17:05
Don't be sorry; just don't clutter OP's question, bud. He isn't asking for alternatives. :) – Casey Falk Jul 25 '14 at 17:06

score 0 · Answer 3 · answered Jul 25 '14 at 16:43

0

You can use css on hover with either the visibility attribute or opacity attribute to hide an object, the full implementation of a gallery widget like this is somewhat more complicated though. CSS solution:

.dots:hover
{
    opacity:0;
}

Makes anything with the dots class invisible on mouse over.

Or if you don't want it to take up any space when invisible:

.dots:hover
{
    display:none;
}

answered Jul 25 '14 at 16:43

nepeo

509
2
9

but this is modifying the element being hovered on right? I want to modify/show a different element by hovering on this one – Abdul Ahmad Jul 25 '14 at 16:50

Prasanth K C · Answer 4 · 2015-06-17T11:11:11.597

0

Try this with simple CSS transitions, like this

HTML

<div id="parent"><br/><span class="bullets">* * * *</span></div>

CSS

.bullets{
opacity:1;
}

#parent:hover > .bullets{
opacity:0;
transition: opacity .2s ease-out;
-moz-transition: opacity .2s ease-out;
-webkit-transition: opacity .2s ease-out;
-o-transition: opacity .2s ease-out;
}

FIDDLE HERE>>

edited Jun 17 '15 at 11:11

answered Jul 25 '14 at 16:51

Prasanth K C

7,073
5
39
62

Unnecessary transitions? – Casey Falk Jul 25 '14 at 16:52
@CaseyFalk what is unnecessary in this? – Prasanth K C Jul 25 '14 at 16:54
"transitions" -- which currently make up 40% of the code. They are nice, but clutter the "meat" of the answer. ;) – Casey Falk Jul 25 '14 at 16:56
@CaseyFalk but his reference site has got that fadeout effect and he want it to do with using pure css. – Prasanth K C Jul 25 '14 at 16:58
I would argue that OP's question only asks how to "hide/unhide HTML portions by hovering" and not how to "fade in/fade out" elements; but, fair enough. Depends on OP's definition of "example" I guess. ;) – Casey Falk Jul 25 '14 at 17:01
@CaseyFalk its not hide/unhide, its appear/disappear like the eg site :-) – Prasanth K C Jul 25 '14 at 17:08
It **is** "hide/unhide" in the question title. But whatevs. : ) – Casey Falk Jul 25 '14 at 17:10

hide/unhide HTML portions by hovering?

4 Answers4