SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict
    Join Date
    Mar 2005
    Location
    Toronto
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Element controlling element?

    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?

  2. #2
    SitePoint Addict
    Join Date
    Mar 2005
    Location
    Toronto
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmm so I am guessing that this only works in the case of hover with span?

  3. #3
    SitePoint Addict
    Join Date
    Mar 2005
    Location
    Toronto
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see I see, thx a lot!

  4. #4
    SitePoint Addict
    Join Date
    Mar 2005
    Location
    Toronto
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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;
    }

  5. #5
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>).

  6. #6
    SitePoint Addict
    Join Date
    Mar 2005
    Location
    Toronto
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  7. #7
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Location
    Utrecht (Netherlands, the)
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>
    Hippopotomonstrosesquippedaliophobia - Fear of long words

  8. #8
    SitePoint Addict
    Join Date
    Mar 2005
    Location
    Toronto
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  9. #9
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Location
    Utrecht (Netherlands, the)
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Hippopotomonstrosesquippedaliophobia - Fear of long words

  10. #10
    SitePoint Addict
    Join Date
    Mar 2005
    Location
    Toronto
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry if it was confusing before, but yep this is what I am looking for, ok I'll test it out now, thx!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •