Question

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

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

上面的代码是创建显示所选产品信息的表的函数。

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

上面的

是用于测试对name元素的影响的悬停css。

它突出显示很好，但它只突出显示元素悬停，即使所有表都具有相同的.class和#id匹配。只是一个新手所以任何帮助将不胜感激。

Answer 1

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

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

您可以使用class属性并在CSS中定义类选择器以匹配多个元素和/或使用更多elaborate CSS 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; }

使用jQuery +类选择器的示例

完整的工作示例：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");
    }  
);

同时设计多个元素

1 个答案: