I have a div called image. It has a CSS-property visibility:hidden;. I have another button called button.
What I need is when I hover the button, the image changes to visibility:visible;.
Can I do it with CSS or do I have to use JavaScript?
-
1Java? Maybe Javascript you mean.Andrea Turri– Andrea Turri2012-08-08 09:33:52 +00:00Commented Aug 8, 2012 at 9:33
-
Post a snippet of your code. Also: What have you tried so far?Sirko– Sirko2012-08-08 09:35:06 +00:00Commented Aug 8, 2012 at 9:35
-
JavaSCRIPT. Java and JavaScript are two entirely different things. Presumably you mean the latter. Also, post the relevant HTML for this question.Bojangles– Bojangles2012-08-08 09:36:19 +00:00Commented Aug 8, 2012 at 9:36
-
1You can do it with CSS if your HTML is suitable. Add a sample of your HTML.thirtydot– thirtydot2012-08-08 09:36:27 +00:00Commented Aug 8, 2012 at 9:36
Add a comment
|
4 Answers
yes you can do this
as like this
HTML
<label for="button">Click here</label>
<input type="checkbox" id="button">
<div class="one">Show my div</div>
Css
label{
background:green;
padding:10px;
}
.one{
width:100px;
display:none;
height:100px;
background:red;
margin-top:20px;
}
input[type="checkbox"]{
visibility:hidden;
}
input[type="checkbox"]:checked ~ .one{
display:block;
}
Updated answer
if you want to just hover than check to this *Demo*
1 Comment
Rohit Azad Malik
@Ariel just for you check to this link if you want to just hover that is very simple tinkerbin.com/0TAAea4f
Note that this is a javascript / jQuery solution:
$(button).hover(function() {
$('div#image').attr('visibility', 'visible');
}, function() {
$('div#image').attr('visibility', 'hidden');
});
Comments
You can only do this if the div is a child of the button - which isn't possible.
It's possible if you make it a child of something else (i.e. not a button, do it differently).
However, what browser? All the main ones? Because if you are willing to use only the most modern it's possible by using sibling selectors.
But for mainstream usage you can only do it if the div is a child of the hover element. Note: You can hover anything, it doesn't have to be a button or a link <a>. So that's what I would do - make a div element that looks like a button, and has a child that you want to change.
4 Comments
thirtydot
It doesn't have to be a child. For example:
<button>Hover me!</button><div>Toggle visibility</div> with div { visibility: hidden; } button:hover + div { visibility: visible; } which will work in IE7 and all newer browsers. (I'm not sure if I didn't read the part in your answer about "sibling selectors", or if you edited it before I wrote this comment.)
Ariel
@thirtydot I did not edit it - you didn't read it. You can clearly see there is no "edit" info on the answer. And for your lack of reading you downvote me?
thirtydot
I haven't downvoted anything here. You can have a sympathy upvote, your answer doesn't deserve the downvote. I thought you might have edited it because I did see the "live edit notification" on your answer when I was writing my comment. Any edits made within the first five minutes do not show as a new revision.
Ariel
@thirtydot Thanks. It's possible I fixed a grammatical error or a typo, but I definitely put in the info about sibling selectors from the start.
You need javascript for that. You can use css if your div is parent for the button, but in your case this is not possible JS
function changeVisibility(objID) {
var el = document.getElementById(objID);
if(el.style.visibility == 'hidden') {
el.style.visibility = 'visible';
return true;
}
el.style.visibility = 'hidden';
}
HTML
<div id="box">Something to show</div>
<input type="button" class="button" onmouseover="changeVisibility('box')" value="Change visibility" />
