Display another Div on Hover

Hi, I have the folowing Fiddle example which is basically what I am trying to achieve but one I integrate it in mt website, It does not work

http://jsfiddle.net/Jhonc66/2z5szktc/

http://www.jqwebdesign.com.au/rsb/

Can Someone help me.
I think it has to do with the following part on the css when trying to get a non adjacent element
#DownloadProductDiv:hover ~ #DownloadProductHiddenDiv
{
    display:block;
    background-color:#0570B6;
    color:white;
    margin-top: 35px;
}

Open in new window

jhonc66Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Hammadh Abdul RahmanCommented:
For this implementation to work both elements must have the same parent.

Refer to below links for more information:
CSS3 element1~element2 Selector
On a CSS hover event, can I change another div's styling?
0
Julian HansenCommented:
The only place you have a DownloadProductHiddenDiv is in the last section which does not display anything. None of your 6 menu icons appear to have a downloadproducthidden div associated with them

Which link was it supposed to work on?
0
Prafulla MaharjanCommented:
#DownloadProductDiv:hover ~ #DownloadProductHiddenDiv
{

}
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

jhonc66Author Commented:
hi JulianH, it is suppose to Work on the Download a Product as seen on the fiddle below.

http://jsfiddle.net/Jhonc66/2z5szktc/30/ 

and I have already Implemented

#DownloadProductDiv:hover ~ #DownloadProductHiddenDiv
{

}

Open in new window


but it has not worked
0
jhonc66Author Commented:
Please review the following Fiddle, I have come to the conclussion that it is not working because it has some <section> tags surrounding them, which I am unable to get rid of as they manage the rows and Columns, so to rephrase my question, how can I make it work..?

http://jsfiddle.net/Jhonc66/2z5szktc/31/
0
Hammadh Abdul RahmanCommented:
Hi jhonc66,

You could use jquery.
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
     $("#DownloadProductDiv").hover(function(){
         $("#DownloadProductHiddenDiv").css({"display": "block", "background-color": "#0570B6", "color": "white", "margin-top": "35px"});
     }).mouseleave(function(){
         $("#DownloadProductHiddenDiv").css({"display": "none"});
     });
});</script>

Open in new window


But if you want to use pure css (this may not be possible without making extensive changes to the design) then ensure that 'DownloadProductHiddenDiv' is a sibling of 'DownloadProductDiv' to use
#DownloadProductDiv:hover ~ #DownloadProductHiddenDiv
{

}

Open in new window

or ensure that 'DownloadProductHiddenDiv' is a descendant of 'DownloadProductDiv' to use
#DownloadProductDiv:hover  #DownloadProductHiddenDiv
{

}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Hammadh Abdul RahmanCommented:
Hi jhonc66,

You could use jquery.
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
     $("#DownloadProductDiv").hover(function(){
         $("#DownloadProductHiddenDiv").css({"display": "block", "background-color": "#0570B6", "color": "white", "margin-top": "35px"});
     }).mouseleave(function(){
         $("#DownloadProductHiddenDiv").css({"display": "none"});
     });
});</script>

Open in new window


But if you want to use pure css (this may not be possible without making extensive changes to the design) then ensure that 'DownloadProductHiddenDiv' is a sibling of 'DownloadProductDiv' to use
#DownloadProductDiv:hover ~ #DownloadProductHiddenDiv
{

}

Open in new window

or ensure that 'DownloadProductHiddenDiv' is a descendant of 'DownloadProductDiv' to use
#DownloadProductDiv:hover  #DownloadProductHiddenDiv
{

}

Open in new window

0
Julian HansenCommented:
your use of the ~ (tilde) is not correct. The two classes have to share a common parent

Correct
.class1 ~ .class2 
<div>
   <div class="class1"> ...</div>
   <div class="someotherclass"></div>
   <div class="class2"> ... </div>
</div>

Open in new window

Incorrect
.class1 ~ .class2 
<div>
   <div class="class1"> ...</div>
   <div class="someotherclass"></div>
</div>
<div>
   <div class="class2"> ... </div>
</div>

Open in new window

Your code
<section>
	<div id="DownloadProductDiv">
		<img id="DownloadProduct" class="BlueCircle" src="http://www.jqwebdesign.com.au/rsb/wp-content/uploads/2015/06/Download-Icon.png" alt="Home icon">
		<br>Download a Product
	</div>
</section>
<section>    
	<div id="DownloadProductHiddenDiv">

Open in new window

The following do not have a common parent
#DownloadProductDiv:hover ~ #DownloadProductHiddenDiv

Open in new window


Sample code - working sample here http://www.marcorpsa.com/ee/t888.html
<!doctype html>
<html>
<head>
<title>Test</title>
<style type="text/css">
.a:hover ~ .c {
	color: white;
	background: red;
}
</style>
</head>
<body>
<div>
	<div class="a">Hover me and Red below should go Red</div>
	<div class="b">Text</div>
	<div class="c">Red</div>
</div>
<div>
	<div class="b">Text</div>
	<div class="c">Same class different parent - does not go red</div>
</div>
</body>
</html>

Open in new window

0
jhonc66Author Commented:
Thanks a Lot for the help.
0
jhonc66Author Commented:
this helped me , however now I have come to the conclusion that it would be better to stay active once clicked how would I edit the code given so that it stays active.. Thank you..

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
     $("#DownloadProductDiv").hover(function(){
         $("#DownloadProductHiddenDiv").css({"display": "block", "background-color": "#0570B6", "color": "white", "margin-top": "35px"});
     }).mouseleave(function(){
         $("#DownloadProductHiddenDiv").css({"display": "none"});
     });
});</script>

Open in new window

0
Hammadh Abdul RahmanCommented:
Let me clarify some requirements.
Do you need it to deactivate on second click?
Do you still want it to activate on hover too?
0
Hammadh Abdul RahmanCommented:
Below code will show 'DownloadProductHiddenDiv' only on clicking 'DownloadProductDiv' and hide it with the next click.
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type='text/javascript'>
var DownloadProductHiddenDiv_ShownDueToClick =0;
$(document).ready(function(){
     $("#DownloadProductDiv").click(function(){
		if(DownloadProductHiddenDiv_ShownDueToClick==0){
			DownloadProductHiddenDiv_ShownDueToClick =1;
		
			$("#DownloadProductHiddenDiv").css({
				"display": "block",
				"background-color": "#0570B6",
				"color": "white",
				"margin-top": "35px"
			});
		}else{
			DownloadProductHiddenDiv_ShownDueToClick=0;
			$("#DownloadProductHiddenDiv").css({"display": "none"});
		}
     });
});</script>

Open in new window

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.