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

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

您需要执行以下行：div.style.color = document.getElementById("first-div").style.color;，将div的颜色指定为另一个div的颜色，而不是将div元素分配给div的颜色。

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

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

其中randomElement是对HTML元素的引用（由document.getElementById获得）。

希望我帮忙！

Answer 2

所以，这是答案（感谢@azeós）：

 function isScrolledIntoView(elem){
 var docViewTop = $(window).scrollTop();
 var docViewBottom = docViewTop + $(window).height();

 var elemTop = $(elem).offset().top;
 var elemBottom = elemTop + $(elem).height();

 return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)
 && (elemBottom <= docViewBottom) &&  (elemTop >= docViewTop) );}

$(window).scroll(function () {
       isOnScreen = isScrolledIntoView("#second-div");
       if(isOnScreen){
          $(".navbar .navbar-collapse > ul > li > a.item").mouseenter(function() {
          $(this).css("color", "#9D45DE")
          });
          $(".navbar .navbar-collapse > ul > li > a.item").mouseleave(function() {
          $(this).css("color", "white")
          });          
       }
});

感谢大家的帮助。

根据div的颜色改变鼠标上的颜色

2 个答案: