• Locked
2 replies [Last post]
Wed, 2014-07-30 15:33
TheTrooper
TheTrooper's picture
Offline
newbie
Last seen: 8 years 33 weeks ago
Timezone: GMT+1
Joined: 2014-07-30
Posts: 2
Points: 3

Hi all, I have got a big question with this. I'm having some trouble, don't know if someone can help.

I have posted the code below.
Explanation: Hover over a link in and displays a hidden div. Pretty cool for navigation purposes.
It doesn't work Sad I can get it to work with a class on the div but that isn't good as will be multiple

Working Code with Div hover

HTML

<link rel="stylesheet" href="styles/style.css">
<div class="information_popup_container">
<div>
	<ul>
<li><a href="#" class="hovertext">Hey!</a></li>
</ul>
</div>
<div class="popup_information">
fdasfda fda <a href="#">fda</a> fgdafdad fdadfsa fdadfsa
</div>
</div>

CSS

div.information_popup_container {
position: absolute;
width:0px;
height:0px;
/* Position Information */
/* Appearance Information */
}
div.information_popup_container > a.hovertext {
/* Position Information */
/* Appearance Information */
}
div.information_popup_container > div.popup_information {
position: fixed;
visibility: hidden;
/* Position Information */
/* Appearance Information */
}
div.information_popup_container > a.hovertext:hover + div.popup_information 
,div.information_popup_container > div.popup_information:hover {
visibility: visible;
}

I have managed to do it with Div, but the main effort is to get it working with a link in a list. Any ideas?

Top
Tags:
Fri, 2014-08-01 05:00
#1
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 3 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Hi TheTrooper, For this to

Hi TheTrooper,
For this to work with CSS only you would be best off structuring the markup so the hidden div's are children orof the hovertext link.

<!doctype html>
<html>
<head>
<style type="text/css">
 
div.popup_information {
position: fixed;
visibility: hidden;
}
a.hovertext:hover + div.popup_information 
 {
visibility: visible;
}
</style>
</head>
<body>
<ul>
<li><a href="#" class="hovertext">Hey!</a> 
  <div class="popup_information">fdasfda fda <a href="#">fda</a> fgdafdad fdadfsa fdadfsa</div>
</li>
</ul>
 
</body>
</html>

Top
Fri, 2014-08-08 10:28
#2
TheTrooper
TheTrooper's picture
Offline
newbie
Last seen: 8 years 33 weeks ago
Timezone: GMT+1
Joined: 2014-07-30
Posts: 2
Points: 3

Cool thanks for that. Only

Cool thanks for that. Only problem is when cursor moves away from the link the div disappears. Need to make it to remain in place so I can click links. If cursor is not on the link or the div after it's appeared then it disappears. Any ideas how that would work?

here is a link below for an example of what I'm trying to achieve. Hover over the main navigation.

Cotsworld

Top
  • Locked