javascript - 根据div的颜色改变鼠标的颜色

Question

我是 Javascript 的新手，我无法弄清楚当特定元素出现在屏幕上时我必须做什么来更改文本的颜色。 我正在使用 Bootstrap 3。
我想在用户悬停时改变颜色，但我希望颜色根据屏幕上的元素而改变。例如，如果屏幕上有一个 .something 元素可见，悬停时文本会变为颜色 X；如果有一个 .somethingelse 元素可见，文本将在悬停时变为颜色 Y。

这是HTML

  <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
          <div class="navbar-header">
            <a href="#"><img src="images/black.jpg" alt="Logo"></a>
          </div>
    <div class="navbar-collapse collapse">
        <div class="active" id="navigation-item1"><a href="#">home</a></div>
        <div class="item"><a href="#about">about</a></div>
        <div class="item"><a href="#contact">contact</a></div>
        <div><a href="image1 url"><img  class="image1" src="images/image1.png" alt="image1"></a></div>   
        <div><a href="image2 url"><img  class="image2" src="images/image2.png" alt="image2"></a></div>     
    </div>
  </div>
</div>
<div class="first-block" id="first-div">some text goes here</div>  
<div class="second-block" id="second-div">some more text goes here</div>  

这是 CSS:

.first-block {
    background-color:rgba(86, 96, 156, 255)
}
.navbar .container .navbar-collapse > div > a{
    float:left;
    padding:45px 10px 0px 10px;
    color:white;
}

Answer 1

我看到你加入就是为了这个，所以这是我能想到的最佳答案:

您无需将 HTML 元素分配给 div 的颜色，而是需要执行以下操作:div.style.color = document.getElementById("first-div").style.color;，将 div 的颜色分配给另一个 div 的颜色。

此外，您需要将事件监听器附加到元素，以便脚本首先实际触发:

randomElement.addEventListener("mouseover", changeColorIn);
randomElement.addEventListener("mouseout", changeColorOut);

其中 randomElement 是对 HTML 元素的引用(通过 document.getElementById 等获得)。

希望我有所帮助!