影响时，另一个元素悬停

-1

我如何也可能会影响其他元素悬停的元素，这两个元素是在这个结构中的元素：影响时，另一个元素悬停

<div id="parent_element"> 
    <div id="class-open-1"></div> 
    <div id="class-close-1"></div> 
</div>

或者他们可能会在这个结构中：

<div id="parent_element"> 
    <div id="div1"> 
     <div id="class-open-1"></div> 
    </div> 
</div> 
<div id="parent_element"></div> 
    <div id="div2"> 
     <div id="class-close-1"></div> 
    </div> 
</div>

我已经试过这个解决方案，它完全适用于第一种情况，但对于第二种情况不工作：

_style.innerHTML = ".class-open" + j + ":hover{ background-color: cyan; } .class-open-" + j + ":hover ~ .class-close-" + j + " { background-color: cyan; }

j的变化，所以我只徘徊具有相同的名称j

此解决方案的情况下工作，但不适用于这两种情况。我也试过这样：

_style.innerHTML = ".class-open" + j + ":hover{ background-color: cyan; } .class-open-" + j + ":hover .class-close-" + j + " { background-color: cyan; }

但这改变背景颜色，并且不只是悬停。

我只需要css或javascript来解决这个问题，有什么建议吗？我正在寻找适用于两种情况的解决方案。

来源

2017-10-16 Mana

请发布[mcve]和真正的HTML，CSS和JS/jQ – zer00ne

哪个元素具有悬停触发器，哪个元素应该在CSS中更改？ – Roberrrt

为什么你发布“伪标记”而不是实际的HTML？和'.class-open“+ j +”'???是甚至CSS？ –

您将需要使用JavaScript mouseover或jQuery .hover（）。这显示鼠标悬停from the MDN。

myElement.addEventListener("mouseover", (event) => { 
    // do something to the other element. 
}

来源

2017-10-16 10:41:14

是的，我认为这是只有解决方案，因为我不能使用CSS选择器来解决这个问题！谢谢 – Mana

如果我的答案适用于您，您是否会点击复选标记接受我的答案？或者至少点击向上箭头，如果我的答案有帮助。 –

我不知道如何悬停第二个元素。使用onmouseover（），现在我只将第一个元素的背景颜色更改为500毫秒，但不能更改第二个元素的背景颜色，并且我认为此解决方案的性能较差，因为我总是必须搜索第二个元素元素，并且我有数百个具有相同className的元素，但只有最后一位数字发生变化。 – Mana

试试这个朋友：

 div#one 
 
    { 
 
    background-color:red; 
 
    } 
 
    div#one:hover ~ div#two 
 
    { 
 
    background-color:yellow; 
 
    }


 
    <div id="one"> 
 
    ONEE 
 
    </div> 
 
    <div> 
 
    SIMPLE DIV 
 
    </div> 
 
    <div> 
 
    SIMPLE DIV 
 
    </div> 
 
    <div> 
 
    SIMPLE DIV 
 
    </div> 
 
    <div> 
 
    SIMPLE DIV 
 
    </div> 
 
    <div> 
 
    SIMPLE DIV 
 
    </div> 
 
    <div id="two"> 
 
    two 
 
    </div>

来源

2017-10-16 10:50:19

谢谢你试图帮助，但这不是我要找的东西，首先，我只想悬停在一个元素上，另一个元素也会悬停，但不会永远改变背景颜色。不是两个元素的结构，我有他们都在一个元素或每个他们有一个不同的父节点.. – Mana

这是什么？它如何回答这个问题？不要只是脱口而出代码。自己解释一下！ https://stackoverflow.com/help/how-to-answer – Rob

如果你能控制的模板代码[我相信我们在大多数情况下做]，那么如果一个元素是其他元素中，它可以用css来解决。

否则，如果他们有不同的父母，JS将是人们已经建议的方向。

来源

2017-10-16 13:02:13

if (/\bclass-/.test(target.className)) { 

       var _style = document.createElement('style'); 
       var j = target.className.match(/\d+$/)[0]; 

       target.style.backgroundColor = "red"; 
       _style.innerHTML = ".class-close-" + j + " { background-color: red; }"; 

       setTimeout(function() { 
        target.style.backgroundColor = ""; 
        _style.innerHTML = '.class-close-' + j + ' { background-color: ""; }'; 
       }, 500); 

       document.head.appendChild(_style); 
      }

这里是我做出的解决方案，但仍在寻找哈弗的“良好效果”，而不是仅仅删除样式为500ms以后。希望这可以帮助别人。

来源

2017-10-16 13:21:27 Mana

影响时，另一个元素悬停

回答

相关问题