html - 悬停在不同父 div 的子元素上时更改子元素的颜色属性

Question

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

这是代码。当“关于”按钮悬停时，我想将 TITLE PAGE 的颜色更改为红色:

<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 的技术为您留下一个封装的文件(除了注入(inject)的变量之外的所有变量都保留在范围内)。以获得很好的描述，并且在内部，所有基于 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