CSS :hover help

Trigger · 1 Jul 2006 at 20:08

Hi,

I have the following piee of code which shows a menu on hover:

Code:

li:hover ul, li.over ul
{
display: block;
}

How can I use it so that also when that list os hovered over, the div with id 'logo' disappears?

I've tried:

Code:

li:hover ul, div#logo
{
display: none;
}

But it removes the div permenantley

Any help would be appreciated

Thanks

Ben

iCraig · 1 Jul 2006 at 22:09

Code:

div#logo a:hover {
  display: none;
}

Just a guess, but might work.

SpicyDuck · 1 Jul 2006 at 23:46

iCraig said:
Code:

div#logo a:hover { display: none;

Just a guess, but might work.

Yeh, but without a closing bracket, I can see the rest of the site going on a downward spiral!

iCraig · 1 Jul 2006 at 23:50

What are you talking about noob? :rolleyes:

SpicyDuck · 1 Jul 2006 at 23:58

iCraig said:
What are you talking about noob?

Omgz, I'm gonna hack you for police.

Trigger · 2 Jul 2006 at 00:40

Thanks for the help

Doesn't work though- doesn't actually do anything

I can post the entire code if that helps?

Thanks again for your help- much appreciated :cool:

Ben

robmiller · 2 Jul 2006 at 00:51

Can't do this cross-browser without Javascript, I'm afraid.

Just use Behaviour.

Code:

var myrules = {
	'li:hover ul' : function(element){
		element.onmouseover = function(){
			document.getElementById('logo').style.display = 'none';
		},
		element.onmouseout = function(){
			document.getElementById('logo').style.display = 'block';
		}
	}
};

Behaviour.register(myrules);

Trigger · 2 Jul 2006 at 01:00

Thankyou

I've read through that site but can't understand where I put the code- does it go in the HTML, the CSS or a separate XML file?

Sorry for being a tad noobish

Thanks again :cool:

Ben

Trigger · 3 Jul 2006 at 17:58

Anybody?

robmiller · 3 Jul 2006 at 18:38

Script tags in the head, or a linked JS file. Make sure you link to the behaviour.js file too

Trigger · 3 Jul 2006 at 22:33

Thanks

I can't get it to work though

If I post my code would you mind taking a look please?

index.php

Code:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

	<title>Site Title - Welcome</title>
	<link rel="stylesheet" type="text/css" href="../css/webwide.css" />
	<link rel="stylesheet" type="text/css" href="../css/navigation.css" />
	<link rel="stylesheet" type="text/css" href="../css/index.css" />
	<link rel="shortcut icon" href="ico/favicon.png" type="image/x-icon" />
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	
	<?php 
	
		include('../includes/script.incl');
		
	?>
	
	<script language="javascript" src="../includes/behaviour.js"></script>
	
	<script language="javascript">
	
		var myrules = {
			'li:hover ul' : function(element){
				element.onmouseover = function(){
					document.getElementById('logo').style.display = 'none';
				},
				element.onmouseout = function(){
					document.getElementById('logo').style.display = 'block';
				}
			}
		};

		Behaviour.register(myrules);

	</script>
	
</head>

<body>

<div id="container">

	<div id="location">Site Title >> <a href="../index" class="locationlink">Home</a></div>
	
	<div id="logo"></div>
	
	<div id="navdiv">
	
		<?php
		
			include('../includes/navigation.incl')
			
		?>
		
	</div>
	
	
	<div id="content">
	
		<p>Hello</p>
		
	</div>

</div>

</body>

</html>

webwide.css

Code:

body
{
background-color: #333;
}

#container
{
height: 1000px;

width: 728px;
min-width: 760px;
max-width: 728px;

margin: 0 Auto;


padding-top: 4px;
padding-bottom: 5px;

border-left: 1px solid #D0EB6A;
border-right: 1px solid #D0EB6A;

border-top: 4px solid #fff;

background-color: #FFF;

font-family: 'Trebuchet MS', Verdana, Sans-Serif;
font-size: 12.5px;
color: #444;
}

#location
{
padding-left: 2px;
padding-bottom: 5px;
}

a.locationlink:link {color: #444; text-decoration: underline;}
a.locationlink:active {color: #444; text-decoration: underline;}
a.locationlink:visited {color: #444; text-decoration: underline;}
a.locationlink:hover {color: #8E2323; text-decoration: underline;}

#logo
{
height: 240px;
min-height: 240px;
max-height: 240px;

width: 728px;

display:block;


margin: 0 Auto;

border-top: 2px solid #D0EB6A;
border-bottom: 2px solid #D0EB6A;

background-image: url('../img/rc.png');
background-repeat: no-repeat;
background-position: middle center;

margin-bottom: 30px;
}

#navdiv
{
float: center;
text-align: center;
background-color: #fff;

border-width: 0;

width: 780x;

margin-bottom: 40px;
}

navigation.css

Code:

ul 
{
list-style: none;
padding: 0;
margin: 0;
text-align: center;
}

#nav a 
{
font-family: 'Trebuchet MS', verdana, sans-serif;
font-size: 12px;
font-weight: bold;
background-color: #333;
color: #D0EB6A;
}

#nav a 
{
text-decoration: none;
}

#nav li li a 
{
background-color: transparent;
display: block;
font-weight: normal;
color: #333;
padding-top: 0.6em;
padding-bottom: 0.6em;

padding: 0.6em;
}

#nav li li a:hover
{
padding: 0.6em;
color: #8B2323;
font-weight: bold;
border-bottom: 1px solid #8B2323;
border-top: 1px solid #8B2323;
background-color: #D0EB6A;
}

li 
{
float: left;
text-align: center;
position: relative;
width: 15em;

cursor: default;
text-align: center;
background-color: #333;
border: 1px solid #D0EB6A;
border-width: 1px;
}

/* Drop Down Box */

li ul
{
display: none;
position: absolute;
top: 100%;
left: 0;



font-weight: normal;
padding: 0.5em 0 1em 0;
border-left: solid 1px #7d6340;
border-right: solid 1px #7d6340;
border-bottom: solid 1px #7d6340;
}

li>ul 
{
top: auto;
left: auto;
}

li li 
{
display: block;
float: none;
background-color: white;
border: 0;
}

li:hover ul, li.over ul
{
display: block;
}

/* Bullet Images */

#navlink1
{
background-image: url('../ico/home.png');
background-repeat: no-repeat;
}

#navlink2
{
background-image: url('../ico/about.png');
background-repeat: no-repeat;
}

#navlink3
{
background-image: url('../ico/news.png');
background-repeat: no-repeat;
}

#navlink4
{
background-image: url('../ico/links.png');
background-repeat: no-repeat;
}

#navlink5
{
background-image: url('../ico/services.png');
background-repeat: no-repeat;
}

#navlink6
{
background-image: url('../ico/computer.png');
background-repeat: no-repeat;
}

#navlink7
{
background-image: url('../ico/special.png');
background-repeat: no-repeat;
}

#navlink8
{
background-image: url('../ico/contactus.png');
background-repeat: no-repeat;
}

#navlink9
{
background-image: url('../ico/faq.png');
background-repeat: no-repeat;
}

#navlink10
{
background-image: url('../ico/jargon.png');
background-repeat: no-repeat;
}

#navlink11
{
background-image: url('../ico/tos.png');
background-repeat: no-repeat;
}

#navlink12
{
background-image: url('../ico/copyright.png');
background-repeat: no-repeat;
}

#navlink14
{
background-image: url('../ico/markup.png');
background-repeat: no-repeat;
}

Sorry for the large amount of code

Thanks for the help though- much appreciated

Ben

Trigger · 5 Jul 2006 at 21:04

Bump

Trigger · 7 Jul 2006 at 19:40

Right well I've uploaded it now to some test webspace to see if anybody can help me- I'm really tearing my hair out now

Link

Thanks for any help- any ideas will be appreciated :cool:

Ben

Dj_Jestar · 7 Jul 2006 at 19:45

You've not got anything in the logo div, thus it won't be visible afaik.

Trigger · 7 Jul 2006 at 20:02

But the logo div is visible- it's just hiding it when i mouse over the menu that's the problem (Yes, the menu will be above the logo soon

)

Thanks for the help BTW

Ben

Dj_Jestar · 7 Jul 2006 at 21:05

Code:

<div id="logo"></div>

from source.. it's empty.

Trigger · 7 Jul 2006 at 21:09

Yeah, but I've forced its width and height in my CSS as it only displays a background image. I'm trying it with the content div but with still no luck. I think I found a problem with the javascript so changed it to this but still nothing:

Code:

		var myrules = {
			'#nav li' : function(element){
				element.onmouseover = function(){
					document.getElementById('#content').style.display = 'none';
				},
				element.onmouseout = function(){
					document.getElementById('#content').style.display = 'block';
				}
			}
		};

Any ideas?

Thanks

Ben

toastyman · 7 Jul 2006 at 21:49

Try and put actual content in the div. A background image is not content..

Try putting   in the div, as divs should always have content within them.

Trigger · 8 Jul 2006 at 19:03

Tried that and still nothing. I've tried other divs as well and it's still the same

Any ideas?

Thanks

Ben