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 3 of 3
  1. #1
    Senior Coder
    Join Date
    Dec 2005
    Location
    Slovenia
    Posts
    1,960
    Thanks
    120
    Thanked 76 Times in 76 Posts

    setting background from js destroys background hover effect

    this works fine: background and color getts changed
    Code:
     .mi:hover
     {
       background:#FFFFD9;/*sort of yellow*/
       color: #B90400;/*red*/
     }
    
     <a id = 'test' class = "mi" href="#n">aaaaaaaaaaa </a>
    when

    Code:
      document.getElementById('test').style.background = 'blue'
    effect from hover , on background, is gone !?
    on color part still works.
    it isn't browser thing, works the same on IE and FF



    this, on the other hand, works as expected, does not corrupt anything

    Code:
      document.getElementById('test').style.color = 'blue'
    test link:
    http://86.61.66.17:8084/AgroZoo/testHTML/testHTML.jsp


    thanks for replays
    Last edited by BubikolRamios; 02-10-2007 at 05:38 PM.

  • #2
    Senior Coder shyam's Avatar
    Join Date
    Jul 2005
    Posts
    1,563
    Thanks
    2
    Thanked 163 Times in 160 Posts
    Inline styles always override the stylesheet styles applied

    add this to the css
    Code:
    .changed {
    			background-color: #0000ff;
    		}
    and change the button code to something like this
    Code:
    <BUTTON class = "brb" ONCLICK="document.getElementById('test').className = document.getElementById('test').className + ' changed';"> destroy background hover 1</BUTTON>
    should do the trick

  • #3
    Senior Coder
    Join Date
    Dec 2005
    Location
    Slovenia
    Posts
    1,960
    Thanks
    120
    Thanked 76 Times in 76 Posts
    nice tip, didn't know that classes in css could be combined like that.

    thanks.


  •  

    Posting Permissions

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