Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: :hover question

  1. #1
    Regular Coder
    Join Date
    Mar 2009
    Posts
    120
    Thanks
    13
    Thanked 3 Times in 3 Posts

    :hover question

    Code:
    <style>
    a:hover table{background-color:red}
    </style>
    
    <body>
    
    <a href="test">test</a>
    <br>
    
    <table>
    <tr>
    <td>
    yeahhhh
    </td>
    </tr>
    </table>
    shouldn't the table's bgcolor become red after putting the mouse abose the link?

  • #2
    Senior Coder djm0219's Avatar
    Join Date
    Aug 2003
    Location
    Wake Forest, North Carolina
    Posts
    1,306
    Thanks
    4
    Thanked 205 Times in 202 Posts
    Not at all. There's no relation between the anchor tag and the table nor is the anchor within a table.
    Dave .... HostMonster for all of your hosting needs

  • #3
    Regular Coder
    Join Date
    May 2009
    Posts
    143
    Thanks
    14
    Thanked 1 Time in 1 Post
    you would have to use javascript and/or server-side script to achieve this
    in javascript you would do something like :

    Code:
    function doMagic(elem){
          if(document.getElementById(elem))
             document.getElementById(elem).style.background-color = 'red';
    }
    if you want to remain on the same page while the user clicks the text, use a label instead. or a div

    Code:
      <!-- <a href="test">test</a> -->
       <div onclick='doMagic("my_table")'>test</div>
     <table id='my_table'>
    <tr>
    <td>
    yeahhhh
    </td>
    </tr>
    </table>
    The problem with your method is that the link changes the url. so whatever applied before wont be applied on the next page.

  • #4
    Regular Coder
    Join Date
    Mar 2009
    Posts
    120
    Thanks
    13
    Thanked 3 Times in 3 Posts
    yeah, but with span it works (at least on mozilla it did):

    Code:
    <style>
    a:hover span{background-color:red}
    </style>
    
    <body>
    
    <a href="test">test <span>yeah</span></a>
    <br>
    if i change that span into a table, it just wont...

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,789
    Thanks
    6
    Thanked 1,022 Times in 995 Posts
    Just in case you didn’t notice: Your span is inside the anchor while the table isn’t. a span {…} addresses a span element if it’s a child of the anchor, a table would address a table if it were a child of an anchor. However, putting tables in an anchor is wrong and not allowed. Use JavaScript, as suggested. However, by all means please use unobtrusive JavaScript:

    Code:
    <head>
    <script>
    // <![CDATA[
    window.onload = function() {
    	var table = document.getElementById('tableID');
    	var trigger = document.getElementById('trigger');
    	trigger.onmouseover = function() {
    		table.style.background = 'red';
    	}
    	trigger.onmouseout = function() {
    		table.style.background = 'transparent';
    	}
    }
    // ]]>
    </script>
    </head>
    <body>
    <span id="trigger">test</span>
    <table id="tableID">
    …
    </table>
    </body>
    The above snippet is very simplified XHTML. Ideally you would also generate the trigger element (which can be any element) by JavaScript if its only purpose is to be a hover trigger for the table because if JS isn’t available this element wouldn’t make any sense.


  •  

    Posting Permissions

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