Question

我正在尝试创建一种效果，其中H1元素嵌套在单独的容器div中，例如，当将鼠标悬停在不同容器div的子元素上时，将其颜色更改为红色，例如导航按钮。

这是代码。我想在“关于”按钮悬停时将“标题页”的颜色更改为红色：

<div class="main">`
   <div class="navbar">
      <nav>
         <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Pictures</a></li>
         </ul>
       </nav>
    </div>

    <div class="logo">
       <h1>TITLE PAGE</h1>
    </div>
</div>

我该怎么做？提前谢谢！

Answer 1

注意：这不是CSS解决方案

根据对该问题的评论，以下是该问题的jQuery解决方案。

我喜欢将我这样的JS文件设置为标准。它使用一种称为立即调用函数表达式（IIFE）See this article的技术为您提供了一个封装的文件（除了注入的所有变量以外的所有变量都保留在范围内），以获得精彩的描述，并且内部所有基于jQuery的逻辑都被包装在jQuery就绪函数中。

鉴于你刚刚开始使用JS，我已经在大多数行上添加了评论，因此你可以了解我正在做什么以及为什么。本质上，我们查找并存储将在悬停中涉及的元素（导航栏链接和h1），然后利用jQuery .hover()函数添加和删除具有归因于它的某些样式的类

<强> JS

// IIFE
;(function($, window, document, undefined) {
    var $els = []; // used to store our jQuery objects
    var data = {}; // used to store non-jQuery objects

    // jQuery ready function
    $(function() {
        // create a function that will "kick-off" the logic on the page
        initialise();
        // use return to keep all functions below as only being executed if called within another function
        return;

        // kick off our logic
        function initialise() {
            populateElementCache();
            attachNavbarLinkHover();
        }

        // populates our $els cache with jQuery elements returned from a DOM search
        // it is far more performant to search the DOM anytime you update your structure than to continually query for elements everytime you want to use them. 
        function populateElementCache(){
            // im being overly specific in the DOM element look up, if you had more specific classes to your navbar links you could use them instead of this long traversal
            $els.navbarLinks = $('.main .navbar nav ul li a');
            // technically there should only be 1 `h1` tag on the page, but again we'll traverse for specificity
            $els.logoH1 = $('.main .logo h1');
        }

        // attach the jQuery `.hover`[http://api.jquery.com/hover/] function to our navbarLinks
        function attachNavbarLinkHover(){
            $els.navbarLinks.hover(
                // first function is for mouseentering the element
                function(){
                    // add a class to our logoH1 element
                    $els.logoH1.addClass('red-text');
                },
                // second function is for mouseleaving the element
                function(){
                    // remove a class to our logoH1 element
                    $els.logoH1.removeClass('red-text');
                }
            )
        }

    });

})(jQuery, window, document);

<强> CSS

.red-text{
    color:red;
}

/*
    Below is basic styling just to show where is "hoverable" on the links
*/
.main .navbar nav ul li a{
    display:inline-block;
    padding:10px;
    background-color:#CCC;
    margin:10px;
}

你可以在这里测试一下

<强> JSFIDDLE

Answer 2

目前，您需要使用Javascript来执行此操作，因为“TITLE PAGE”标题元素不是“关于”按钮元素的子元素。

使用Javascript（ES5）：

1：将“类”添加到“关于”按钮和“TITLE PAGE”标题中，以便更轻松地引用元素。

按钮

<li><a href="#" class='about button'>About</a></li>

头

<h1 class='about title'>TITLE PAGE</h1>

2：创建两个函数，在光标悬停时调用，并离开“关于”按钮（在事件监听器中触发）。

这些变量引用“关于”按钮和“TITLE PAGE”标题。

var aboutButton = document.getElementsByClassName('about button')[0];
var aboutTitle = document.getElementsByClassName('about title')[0];

此函数将“active”类添加到“About”标题。

function aboutHover(){
  aboutTitle.classList.add('active');
}

此函数从“About”标题元素中删除“active”类。

function aboutLeave(){
  aboutTitle.classList.remove('active');
}

3：创建两个事件侦听器，用于悬停和离开“关于”按钮，并通过步骤2中创建的功能。

aboutButton.addEventListener('mouseover', aboutHover);
aboutButton.addEventListener('mouseout', aboutLeave);

4：当与“约”类和“h1”标签配对时，为“活动”类添加样式

h1.about.active{
  color: red
}

一起：

<!DOCTYPE html>
<html>
  <head>
    <styles>
      h1.about.active{
        color: red
      }
    </styles>
    <script>
      var aboutButton = document.getElementsByClassName('about button')[0];
      var aboutTitle = document.getElementsByClassName('about title')[0];

      function aboutHover(){
        aboutTitle.classList.add('active');
      }

      function aboutLeave(){
        aboutTitle.classList.remove('active');
      }

      aboutButton.addEventListener('mouseover', aboutHover);
      aboutButton.addEventListener('mouseout', aboutLeave);
    </script>
  </head>

  <body>
    <div class="main">`
      <div class="navbar">
        <nav>
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#" class='about button'>About</a></li>
            <li><a href="#">Pictures</a></li>
          </ul>
        </nav>
      </div>

      <div class="logo">
        <h1 class='about title'>TITLE PAGE</h1>
      </div>
    </div>
  </body>

</html>

将鼠标悬停在另一个父div的子元素上时，更改子元素的颜色属性

2 个答案:

Try it out here