asked on

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

Hammadh Abdul Rahman

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?

Julian Hansen

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?

Prafulla Maharjan

#DownloadProductDiv:hover ~ #DownloadProductHiddenDiv
{

}

jhonc66

ASKER

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

jhonc66

ASKER

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/

ASKER CERTIFIED SOLUTION

Hammadh Abdul Rahman

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Hammadh Abdul Rahman

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

Julian Hansen

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

jhonc66

ASKER

Thanks a Lot for the help.

jhonc66

ASKER

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

Hammadh Abdul Rahman

Let me clarify some requirements.
Do you need it to deactivate on second click?
Do you still want it to activate on hover too?

Hammadh Abdul Rahman

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