Javascript 根据div'；更改鼠标上方的颜色；s颜色

我是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>  

---

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

您不需要将HTML元素分配给div的颜色，而是需要按照以下步骤执行：

div.style.color=document.getElementById（“第一个div”）.style.color，将div的颜色指定给另一个div的颜色。




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


其中，
randomElement
是对HTML元素的引用（通过
document.getElementById
或类似方式获得）。




希望我能帮忙
 因此，以下是答案（感谢@azeós）：

函数是crolledintoview（elem）{
var docViewTop=$（window.scrollTop（）；
var docViewBottom=docViewTop+$（window）.height（）；
var elemTop=$（elem）.offset（）.top；
var elemBottom=elemTop+$（elem）.height（）；
返回（（elemBottom>=docViewTop）和（elemTop请编辑您的问题并在上面添加您的评论。您如何尝试更改导航栏元素的颜色？您必须查看引导CSS以查看实际颜色的应用情况。它可能类似于
.navbar default.navbar nav>li>a
，因此您必须使用该选择器来覆盖它。而不是非常感谢，@azeós！它帮了我很大的忙，我找到了解决办法（在我的帖子上编辑）谢谢你分享一个解决方案，很高兴你找到了一个。请考虑把它从你的问题中编辑出来，并把它作为你自己问题的答案。让别人更容易发现。好的，我会做的。谢谢你的建议。嗨。谢谢你的帮助！我试过你说的话，没发生什么事。当然我做错了什么。现在，我有了这个新C。ode。它检查元素是否在屏幕上，如果为真，则执行某些操作。例如，我可以使其更改“p”元素的颜色，但这不是我想要的。我使用此新代码尝试了addEventListener，但什么都没有发生。我尝试了（“a:hover”）而不是（“p”），但它只有在鼠标固定在链接上时才会改变，而不是在鼠标悬停时。无论如何，非常感谢您的帮助和友好的回答。非常抱歉，我帮不上忙。祝您好运！
.first-block {
    background-color:rgba(86, 96, 156, 255)
}
.navbar .container .navbar-collapse > div > a{
    float:left;
    padding:45px 10px 0px 10px;
    color:white;
}

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

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