尝试使用 JQuery 设置侧边栏小部件导航的样式

Question

对于具有子菜单的导航项目，例如“主要费用”，我已包含一个箭头。现在，当我将鼠标悬停在主菜单项上时，我添加了一个动画，它旋转箭头并用红色突出显示主菜单项。为了旋转箭头，我向所有具有箭头的主菜单项添加了一个 .rotateOnHover 类。然后我使用 CSS 来执行旋转动画。

现在解决问题。当我将鼠标悬停在子菜单项上时，我想保持该特定主菜单项突出显示并保持箭头旋转。例如，当我将鼠标悬停在“Grade 1-3 Boarding”上时，我希望突出显示“Primary Fees”并保持箭头旋转。我在互联网上进行了一些搜索，特别是 StackOverflow，并鼓励我使用 Jquery 来完成这项任务。因为这本质上是悬停在子元素上并更改其父元素的样式。

问题是当我将鼠标悬停在子菜单项上时，例如'Grade 1-3 Boarding'，它将旋转箭头动画应用于所有具有相同箭头和箭头类的主菜单项，.rotateOnHover。

如何将鼠标悬停在子菜单项上并将所需的悬停效果应用于其父菜单项而不是所有菜单项？

任何帮助将不胜感激。

此外，对于侧边栏和网站的任何样式提示，一般来说，我们将不胜感激。这是我的第一个网站，我正在工作中学习。

这是侧边栏的代码

HTML

<div class="sidebar-widget">
    <div class="sidebarExplore">
        <h4>
            <span style="color: grey; text-align: center; margin:auto; display:block; font-size: 25px;">
            <i class="fa fa-globe" aria-hidden="true"></i>&nbsp;Explore This Section</span>
        </h4>
    </div>
    <ul class="sidebarExploreList">
        <li class="dropdownsidebaritem">
            <a href="#"> Primary Fees&nbsp<i class="fa fa-chevron-circle-down rotateOnHover"></i></a>
            <div class="sidebarExploreSubmenu" style="font-size: 12px;">
                <a href="" style="font-size: 15px; font-weight:bold; padding: 5px;">Grade 1 - 3 - Boarding</a>
                <a href="" style="font-size: 15px; font-weight:bold; padding: 5px;">Grade 4 - 7 - Boarding</a>
                <a href="" style="font-size: 15px; font-weight:bold; padding: 5px;">Other Costs -  Boarding</a>
                <a href="" style="font-size: 15px; font-weight:bold; padding: 5px;">Reception - Day School</a>
                <a href="" style="font-size: 15px; font-weight:bold; padding: 5px;">Grade 1 - 3 - Day School</a>
                <a href="" style="font-size: 15px; font-weight:bold; padding: 5px;">Grade 4 - 7 - Day School</a>
                <a href="" style="font-size: 15px; font-weight:bold; padding: 5px;">Other Costs - Day School</a>
            </div>
        </li>
        <li class="dropdownsidebaritem"><a href="#">Secondary Fees&nbsp<i class="fa fa-chevron-circle-down rotateOnHover"></i></a></li>
        <li><a href="#">Admission Forms</a></li>
        <li><a href="#">School Fee Policy</a></li>
    </ul>
</div>

CSS

 .sidebar-widget {
    border:1px solid #afb1b3;
    margin-top: 13.8%;
    margin-right: 5%;  
    overflow: hidden;
    background-color: #f3f3f3;
    float: right;
    width: 20%;
    height: auto;

}

.sidebar-widget ul {
    list-style-type: none;
    padding: 0;
    margin: 0;

}

.sidebar-widget ul li {
    list-style-type: none;
    width: 100%;
     border-top: 1px solid black;

}

.sidebar-widget ul li:last-child{
    list-style-type: none;
    width: 100%;
    border-bottom: 1px solid black;
}
.sidebar-widget ul li a{
    display: block;
    position: relative;
    text-decoration: none;  
    text-align: center;
    padding: 20px;
    font-size: 18px;
    font-weight: 100;
    text-rendering: optimizeLegibility;

}




.sidebarExploreSubmenu{
    display: none;
    position: relative;
    color: black;
    background-color:white;
    font-size: 11px;
    border-bottom: 0.5px solid bisque;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}


.sidebarExploreSubmenu a{
    padding: 10px;
    text-decoration: none;
    display: block;
    text-align: center;
    font-size: 10px;

}
.rotateOnHover {
    font-size:18px;
     -webkit-transition: -webkit-transform .8s ease-in-out;
          transition: transform .8s ease-in-out;
}

.sidebar-widget a:hover {
    background-color: #990000;
    color: white;
}
.dropdownsidebaritem a:hover  .rotateOnHover {
     -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.sidebarExploreSubmenu a:hover{
    font-size: 10px;
}

JS

<script type="text/javascript">

$(document).ready(function() {

    $( '.dropdownsidebaritem' ).hover(
        function(){
            $(this).children('.sidebarExploreSubmenu')
                .delay(100)
                    .slideDown(500);
        },
        function(){
            $(this).children('.sidebarExploreSubmenu')
                .clearQueue()
                .slideUp(500);
        }
    );
});


$(function() {
  $('.sidebarExploreSubmenu a').hover(function() {
    $('.rotateOnHover').css('transform', 'rotate(180deg)');
  }, function() {
    // on mouseout, reset the transform
    $('.rotateOnHover').css('transform', '');
  });
});

</script>

Answer 1

首先不要给内联元素设置样式，例如：

    <a href="" style="font-size: 15px; font-weight:bold; padding: 5px;">Grade 4 - 7 - Day School</a>

改为这样：

<a href="" class="sidebarExploreSubmenu-anchor">Grade 4 - 7 - Day School</a>

然后在style.css中添加：

.sidebarExploreSubmenu-anchor {
font-size: 15px; font-weight:bold; padding: 5px; }

它会使您的网站变得混乱。尝试在 style.css 中做所有事情，记住浏览器读取样式的级别，例如： !important > 内联样式 > #style .style .style > .style .style > .style