Question

i created four drop down select lists in html and dynamically load them from an ajax object. i made it so you could select an item in the select list and an onchange event that ran a javascript function that would get the items respective data and display in a table underneath the select list. there are four of these on the page and so that a person could select four different items and then compare their characteristics. THat all works like a charm, however im using a :hover in css to try and highlight the characteristics of the four products that match the one being hovered upon ie: if you hover over one product name it highlights all the product names. heres the code

function displayStrainInfo(event){
    var eventTrigger = event.currentTarget;
    Inspection::Ptr inspectionModelvar testOption =    document.getElementById(eventTrigger.id);
    var selectedIndex = testOption.options[testOption.selectedIndex].index;
    //alert(flowerPeriod[0].firstChild.data);
    //alert(eventTrigger.id.substr(6,5));
    document.getElementById(eventTrigger.id.substr(6,5)).innerHTML = "<table class='strainInfoTable'><tr class='infoRow'><td id='strain_Name'>Strain Name: " + products[selectedIndex - 1].firstChild.data + "</td><td>Strain Genetics: " + genetics[selectedIndex - 1].firstChild.data + "</td></tr><tr><td class='infoRow' colspan='2'>Indica:" + raceIndica[selectedIndex - 1].firstChild.data + "&nbsp&nbsp&nbsp&nbsp&nbspSativa: " + raceSativa[selectedIndex - 1].firstChild.data + "&nbsp&nbsp&nbsp&nbsp&nbspRuderalis: " + raceRuderalis[selectedIndex - 1].firstChild.data + "</td></tr><tr><td class='infoRow'>Height: " + height[selectedIndex - 1].firstChild.data + "</td></tr><tr><td class='infoRow'>Flower Period: " + flowerPeriod[selectedIndex - 1].firstChild.data + "</td></tr><tr><td class='infoRow' id='botom'>Potency: " + potency[selectedIndex - 1].firstChild.data + "</td></tr></table>";
}

the above code is the function that creates the table that displays the choosen products information.

#strain_Name:hover{
    padding-top: 20px;
    padding-left: 20px;
    color: blue;
    font-size: 1.25em;
}

above here is the hover css for testing the effect on the name element.

it highlights just fine but it only highlights the element hovered over even though all the tables have the same .class and #id to match. just a newbie so any help would be greatly appreciated.

Answer 1

…even though all the tables have the same .class and #id to match

It sounds like you have duplicate IDs. IDs must be unique.

You can use the class attribute and define a class selector in CSS to match multiple elements and/or use a more elaborate CSS selector.

Simple Example of Using a Class Selector

<div class="foo">1</div>
<div class="foo">2</div>
<div class="foo">3</div>
<div class="foo">4</div>

.foo:hover { background-color: red; }

Example of Using jQuery + Class Selectors

Full working example: http://jsfiddle.net/mSWcw/

$(".parent").hover(
    // fired on entry
    function(){
        var matchingChildren = $(".foo", this); // select all children with the class "foo" within the parent object
        matchingChildren.addClass("hovered");
    },

    // fired on exit
    function(){
        var matchingChildren = $(".foo", this);
        matchingChildren.removeClass("hovered");
    }  
);​