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 6 of 6
  1. #1
    New Coder
    Join Date
    Feb 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS :hover{background-color} ignored after javascript function?

    Hello all,

    When I change a background color in javascript, IE6 (I don't know about FF) is ignoring my previous hover property for background color. This is strange because the text-decoration still works. Can someone explain this? Is there any way I can manipulate hover properties in javascript? Here is some example code (try it yourself):

    Code:
    <html>
    <head>
    	<style>
    	a.cat {text-decoration:none;padding:4px;background:yellow;}
    	a.cat:hover {text-decoration:underline;background:pink;}
    	</style>
    
    	<script type="text/javascript">
    		function test(n)
    		{
    			switch (n)
    			{
    				case 1:	document.getElementById("cat1").style.background="red";
    					document.getElementById("cat2").style.background="yellow";
    					break;
    				case 2:	document.getElementById("cat1").style.background="yellow";
    					document.getElementById("cat2").style.background="red";
    					break;
    			}
    		}
    	</script>
    </head>
    <body>
    	<a href="javascript:test(1)" id="cat1" class="cat">Cat1</a>
    	<a href="javascript:test(2)" id="cat2" class="cat">Cat2</a>
    </body>
    </html>
    Thanks!

  • #2
    Regular Coder
    Join Date
    May 2004
    Location
    Alabama, USA
    Posts
    237
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi diafygi, Welcome to Coding Forums!

    I think it has to do with "specificity".

    Just add/remove a className on the element. For example toggle element.className between 'cat' and 'catNew':
    Code:
    	<style>
    	a.cat {text-decoration:none;padding:4px;background:yellow;}
    	a.cat:hover {text-decoration:underline;background:pink;}
    
    	a.catNew {text-decoration:none;padding:4px;background:red;}
    	a.catNew:hover {text-decoration:underline;background:white;}
    	</style>
    Last edited by MikeFoster; 02-12-2007 at 11:32 PM.

  • #3
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    IE has some disappearing background bugs as well and this may be one. Try googling "IE bugs" or similar and see if that bug is listed.

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    Quote Originally Posted by diafygi View Post
    I don't know about FF
    This is happening in Firefox too.

    Quote Originally Posted by diafygi View Post
    This is strange because the text-decoration still works. Can someone explain this?
    I think MikeFoster is right about specificity. CSS declarations with greater specificity take precedence over those with lower specificity. One type of specificity relates to how styles are defined:

    • Inline via style attribute. These have the greatest specificity. Example: <a style="background-color: red;"></a>.
    • Embedded via style element. These have lower specificity than the inline style references. Example: <style type="text/css">a { background-color: red; }</style>.
    To understand why this is relevant, the following two sets of code are essentially equivalent (in this context):

    Code:
    document.getElementById("cat1").style.background = "red";
    document.getElementById("cat2").style.background = "yellow";
    Code:
    document.getElementById("cat1").setAttribute("style", "background: red;");
    document.getElementById("cat2").setAttribute("style", "background: yellow;");
    Thus, the background aspect of your :hover pseudo-class selector is being overridden. Using background-color: pink !important increases its specificity and solves the problem.

    Quote Originally Posted by diafygi View Post
    Is there any way I can manipulate hover properties in javascript?
    Using mouse hover events, yes.

    An example:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
    
    <html lang="en">
      <head>
    
        <meta http-equiv="Content-Type" content="text/html; UTF-8">
        <meta http-equiv="Content-Script-Type" content="text/javascript">
    
        <title>CF 107305</title>
    
        <!-- Notes
          1. A display: inline-block declaration is used as a workaround to an Internet Explorer rendering issue.
          2. The display: inline-block declaration is not supported by Firefox.
          3. A JavaScript‐based hover effect is used instead of a CSS‐based hover effect due to a lack of Internet Explorer 6 :hover pseudo‐class support.
          4. Separation of structure and script has been sacrificed for Internet Explorer compatibility.
          -->
    
        <style type="text/css">
          * { margin: 0; }
          html { padding: 1em; }
          a.cat { display: inline-block; padding: 4px; background-color: yellow; color: blue; cursor: pointer; }
          a.cat-selected { background-color: red; }
          a.cat-hover { background-color: pink; text-decoration: underline; }
        </style>
    
        <script type="text/javascript">
          function test(n) {
            var cat1 = document.getElementsByTagName("a")[0];
            var cat2 = document.getElementsByTagName("a")[1];
            switch (n) {
              case 1:
                cat1.className += " cat-selected";
                cat2.className = cat2.className.replace(/ cat-selected/, "");
                break;
              case 2:
                cat1.className = cat1.className.replace(/ cat-selected/, "");
                cat2.className += " cat-selected";
                break;
              }
            }
        </script>
    
      </head>
      <body>
    
        <div>
          <a class="cat" onclick="test(1);" onmouseover="this.className += ' cat-hover';" onmouseout="this.className = this.className.replace(/ cat-hover/, '');">Cat1</a>
          <a class="cat" onclick="test(2);" onmouseover="this.className += ' cat-hover';" onmouseout="this.className = this.className.replace(/ cat-hover/, '');">Cat2</a>
        </div>
    
      </body>
    </html>
    Also make sure that you use valid HTML. The HTML in your initial post is not correct.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    New Coder
    Join Date
    Feb 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks guys, you have been infinitely helpful. The !important suggestion worked perfectly.

  • #6
    Regular Coder
    Join Date
    May 2004
    Location
    Alabama, USA
    Posts
    237
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Great post, Arbitrator!


  •  

    Posting Permissions

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