Element controlling element?

**kefeso** · Jun 26, 2006 09:24

Is it possible to have an element controlling another element's property? For example, a:hover a link would trigger the visilbility of a div? If this is possible, how would the coding be like?

**kefeso** · Jun 26, 2006 11:22

hmm so I am guessing that this only works in the case of hover with span?

**kefeso** · Jun 26, 2006 13:37

I see I see, thx a lot!

**kefeso** · Jun 27, 2006 19:07

hmm, I seem to have ran into some problems with this. How come I couldn't use the span tag to control a part of the list. Here are the codes
HTML

Code:

<ul>
<a href=""><li>Click</li>
<span>
<li>fdsafsaf</li>
<li>dsafdsaf</li>
<li>fdsafsdfa</li>
</span>
</a>
</ul>

CSS:

Code:

span{
	visibility: hidden;
}

a:hover span{
	visibility: visible;
}

**Tyssen** · Jun 27, 2006 20:32

A span is an inline element and can't contain block elements (list items). Apart from that, everything inside a list (ie between the <ul> & </ul>) most go inside a list item tag pair (<li></li>).

**kefeso** · Jun 28, 2006 08:27

so what do you suggest me to do if I want only part of the list with the hover effect, or is it not achievable?

**CadmiumNL** · Jun 28, 2006 08:35

You could add classes to the part you want the effect to work on. Consider the following code:

Code:

<html>
<head>
<style>
	a.test:hover { color: orange; }
</style>
</head>
<body>
<a class="test" href="#">blaat</a>
<a href="#">pipo</a>
</body>
</html>

**kefeso** · Jun 28, 2006 08:43

Yea, I know that's achievable, thx though, but what I am looking for is if it's possible to do it for only a part of a list, like in my post above #8.

**CadmiumNL** · Jun 28, 2006 09:18

I'm not sure what you were trying to achieve in that post, but I'm guessing you need to nest another list inside your list:

Code:

<ul>
	<li>
		<a href="#">Click</a>
		<ul>
			<li>fdsafsaf</li>
			<li>dsafdsaf</li>
			<li>fdsafsdfa</li>
		</ul>
	</li>
</ul>

You can then control the nested list with something like this:

Code:

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

You'll need some javascript to get the hover to work in IE (it only supports the hover pseudoclass on anchors):

Code:

hover = function()
{
	var li = document.getElementsByTagName('li');
	for (i = 0; i < li.length; i++)
	{
		li[i].onmouseover = function()
		{
			this.className += ' hover';
		}
		li[i].onmouseout = function()
		{
			this.className = this.className.replace(' hover', '');
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", hover);

If this is not what you're looking for, please explain yourself again.

**kefeso** · Jun 28, 2006 09:26

Sorry if it was confusing before, but yep this is what I am looking for, ok I'll test it out now, thx!

User Tag List

Thread: Element controlling element?

Thread Tools

Display

Element controlling element?

Bookmarks

Bookmarks

Posting Permissions