Javascript 同时设置多个元素的样式

我在html中创建了四个下拉选择列表，并从ajax对象动态加载它们。我这样做是为了让您可以在选择列表中选择一个项目和一个onchange事件，该事件运行一个javascript函数，该函数将获取各个项目的数据并显示在选择列表下面的表中。页面上有四个项目，因此用户可以选择四个不同的项目，然后比较它们的特征。这一切都像一个魅力，然而，我在css中使用：hover来尝试突出显示四个产品的特征，这四个产品与被悬停的产品相匹配，即：如果你悬停在一个产品名称上，它会突出显示所有产品名称。这是密码

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>";
}

上面是用于测试name元素效果的悬停css

它高亮显示得很好，但只高亮显示悬停在上面的元素，即使所有表都有相同的.class和id要匹配。只是一个新手，所以任何帮助都将不胜感激

…即使所有表都要匹配相同的.class和id

听起来你有重复的ID。ID必须是唯一的

您可以使用class属性并在CSS中定义一个类选择器来匹配多个元素和/或使用更多元素

使用类选择器的简单示例

…即使所有表都要匹配相同的.class和id

听起来你有重复的ID。ID必须是唯一的

您可以使用class属性并在CSS中定义一个类选择器来匹配多个元素和/或使用更多元素

使用类选择器的简单示例

---

喜欢然后。infoRow:hover{color:red；}我也试过了，但只为被悬停的那个设置了样式。没有相同的ID请访问burytheed.com/wtpn并单击vs选项卡抱歉仍然没有dif分辨率编码应该有四个下拉列表。把一些东西分成两部分，然后将鼠标悬停在菌株名称上，看看是什么happens@Beanno1116-我访问了你的页面，但当我将鼠标悬停在某个项目上时，我只收到一个警告框。不管怎样，当您仅将鼠标悬停在其中一个元素上时，是否正在尝试设置一组元素的样式？最简单的方法可能是用一点脚本。长话短说，我想通过将鼠标悬停在一个元素上来设计一组元素的样式。我尝试了一个mouseover事件来将类名更改为所需的样式，但是它只对一个进行了样式设置。我尝试了许多不同的方法来利用，我快疯了。lolhere是im使用的函数highlightHovereddata{if data=='name'{//alertdata；document.getElementById'strainName'.className=hovered；}喜欢然后。infoRow:hover{color:red；}我也试过了，但只为悬停的一个设置了样式。没有相同的ID转到burytheed.com/wtpn并单击vs选项卡抱歉仍然没有dif分辨率的编码应该有四个下拉列表。选择两个中的某个，然后将鼠标悬停在菌株名称上，看看有什么happens@Beanno1116-我去了你的页面，但我刚看到一个警告框将鼠标悬停在某个项目上。不管怎样，当您仅将鼠标悬停在其中一个项目上时，是否正在尝试设置一组元素的样式？最简单的方法可能是使用一点脚本。长话短说，我希望通过将鼠标悬停在一个项目上来设置一组元素的样式。我已尝试通过鼠标悬停事件将类名更改为所需的样式，但它仅为styl是的。我尝试了很多不同的方法来利用它，我快疯了。这里是我使用的函数highlightHovereddata{if data=='name'{//alertdata；document.getElementById'strainName'.className=悬停；}

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

<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; }

$(".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");
    }  
);​