CODEWITHSUNDEEP
javascripthtmlcss
Abdul Ahmad
Abdul Ahmad

Reputation: 10021

hide/unhide HTML portions by hovering?

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?

Upvotes: 0

Views: 196

Answers (4)

Prasanth K C
Prasanth K C

Reputation: 7332

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

Upvotes: 0

user3765023
user3765023

Reputation: 77

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

Upvotes: 1

Brent Waggoner
Brent Waggoner

Reputation: 558

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.

Upvotes: 1

nepeo
nepeo

Reputation: 509

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

Upvotes: 0

Related Questions