Question

如何在悬停另一个元素时影响元素，并且这两个元素在此结构中：

<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来解决这个问题，有什么建议吗？我正在寻找适用于两种情况的解决方案。

Answer 1

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

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

Answer 2

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

这是我制作的解决方案，但仍然在寻找良好的效果＆＃34;悬停而不是仅仅删除500ms后的样式.. 希望这有助于某人。

Answer 3

试试这位朋友：

     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>

Answer 4

如果您可以控制模板代码[我相信我们在大多数情况下会这样做]，那么如果一个元素在其他元素中，则可以使用css解决它。

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

当另一个元素悬停时影响元素

4 个答案: