www.webdeveloper.com
Results 1 to 2 of 2

Thread: Get mouse hover effect work on tables create by twiki

  1. #1
    Join Date
    Jul 2011
    Posts
    1

    Get mouse hover effect work on tables create by twiki

    Hi guys,

    I am having a problem of getting mouseover event work on a webpage which is pre-populated by a third party tool twiki. The html code is something like this:

    HTML Code:
    <table cellspacing="0" id="table1" cellpadding="0" class="twikiTable" rules="rows" border="1"> 
    		<tr class="twikiTableOdd twikiTableRowdataBgSorted0 twikiTableRowdataBg0"> 
    On the condition of knowing what the table name (always going to be table1) will be, can I write some javascripts to make the mouse hover effect work.

    Here is the code I use but I can't get it work somehow.

    CSS
    HTML Code:
    <!-- highlight --> <style type="text/css"> 
    tr:hover, tr.highlight { background-color: #aaa; } 
    </style> 
    Code:
    function setupHighlight() {
        var rows = document.getElementsByTagName('tr');
        alert("rows is: " + rows);
    	for (i = 0; i < rows.length; i++) {
            rows[i].onmouseover = highlight;
            rows[i].onmouseout = dehighlight;
        }
    }
    
    function highlight() {
        this.className = "highlight";
    }
    
    function dehighlight() {
        this.className = "";
    }
    Please can you shed some lights on it? Much appreciated.

    Best regards,
    Peter

  2. #2
    Join Date
    Dec 2008
    Posts
    488
    Code:
    twikiTableOdd:hover, twikiTableEven:hover {
        background-color: #aaa !important;
    }
    Forget the javascript. Just use the !important keyword there and it will over write the properties no matter where it's found in the code.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles