HTML / CSS悬停影响父元素+ Jquery

时间：2016-10-26 17:42:37

标签： javascript jquery html css css3

我正在测试项目的导航栏，我使用的是基本的Html / css 我添加了Jquery，以便悬停效果可能会影响父元素。

＆＃13;
＆＃13; 
$(document).ready(function () {
    $(".nav-level-2").hover(
  function () {
     $("li>a").css("background", "white");
  }
);
   $(".nav-level-2").mouseleave(
    function () {
     $("li>a").css("background", "none");
  });
  });
＆＃13; 
.main-nav {
    background: #000;
    height: 30px;
    position: relative;
    overflow: visible;
    z-index: 2;
    width: 100%;
    left: 0;
    cursor: default;
}

.main-nav .inner{
    height: 100%;
}

.main-nav>.inner{
    text-align: justify;
}

.nav-links-container {
    position: static;
    /* background: red; */
    height: 100%;
    
}

.nav-links{
    padding: 0 0 0 3px;
    display: inline;
    margin-bottom: 20px;
    overflow: hidden;
     /*background-color: green; */
}

li {
    vertical-align: top;
    padding: 5px;
    display: inline-block;
    /* background: blue; */
}

li>a {
    color: #FFF;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 10px 9px 9px;
    margin: 0 -3px;
}
li>a:hover {
    background-color: white;
    color:#000;    
}

.nav-level-2 {
    display: none;
    position: absolute;
    top: 30px;
    left: 0;
    width: 100%;
    height: auto;
    border-bottom: 5px solid #000;
    background: red;
    text-align: left;

}

.nav-level-2-container {
    padding-top: 40px;
    padding-bottom: 40px;
    -ms-flex: 0px 1px auto;
    -webkit-box-flex: 0;
    -webkit-flex: 0px 1px auto;
    flex: 0px 1px auto;
}

li>a:hover + .nav-level-2{
    display: block;
  
} 

.nav-level-2:hover {
  display:block;
  
}


.row{
    display: flex;
    flex: 0 1 auto;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;    
}

.list-container {
    padding: 0px;
}

.col-lg-2{
    flex-basis: 16.666666667%;
    max-width: 16.666666667%;
    box-sizing: border-box;
    display: flex;
    flex: 0 1 auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-flex: 0;
    background: red;
    margin-left: 5px;
    
}

.main-nav>.inner .nav-level-2 .nav-level-2-container .heading {
    text-transform: uppercase;
    color: #000;
    letter-spacing: 1px;
    margin-bottom: 20px;
    font-size: 14px;
    margin: 0 0 20px;
}
＆＃13; 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<nav class="main-nav">
<div class="inner max-girdle-width">
                        <div class="nav-links-container">
                          <ul class="nav-links">
                            <li class="nav-whats-new"> <a class="nav-level-1" href="#">What's New</a>
  <div class="nav-level-2">
                                <div class="nav-level-2-container row max-girdle-width">
                                   <div class="list-container shop col-lg-2">
                                                   <h3 class="heading"> Shop by</h3> 
                                                    
                                   </div>
                                </div>
                              </div>
                            </li>
                          </ul>
                        </div>
                      </div>
                    </nav>
＆＃13;
＆＃13;
＆＃13;

我想要实现的是当我将鼠标悬停在红色区块上时，我正在尝试使用颜色＃000和背景白色来显示父元素（＆＃39;新的＆＃39;）。

SEE THIS IMAGE <--

我知道当我徘徊“新事物”时它确实将颜色变为白色，但是当我将鼠标悬停在红色块上以进行导航时，背景会随着“新的＆＃39;新的＆＃39;消失在黑色背景下。

2 个答案:

答案 0 :(得分：2)

无需JavaScript即可执行您想要的操作。我想这就是你要找的东西？基本上，我使用父div上的:hover来更改子元素的背景和颜色。

.nav-whats-new:hover a {
   background:white;
   color:black;
}

示例：

＆＃13;
＆＃13; 
.main-nav {
    background: #000;
    height: 30px;
    position: relative;
    overflow: visible;
    z-index: 2;
    width: 100%;
    left: 0;
    cursor: default;
}

.nav-whats-new:hover a {
   background:white;
   color:black;
}

.main-nav .inner{
    height: 100%;
}

.main-nav>.inner{
    text-align: justify;
}

.nav-links-container {
    position: static;
    /* background: red; */
    height: 100%;
    
}

.nav-links{
    padding: 0 0 0 3px;
    display: inline;
    margin-bottom: 20px;
    overflow: hidden;
     /*background-color: green; */
}

li {
    vertical-align: top;
    padding: 5px;
    display: inline-block;
    /* background: blue; */
}

li>a {
    color: #FFF;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 10px 9px 9px;
    margin: 0 -3px;
}
li>a:hover {
    background-color: white;
    color:#000;    
}

.nav-level-2 {
    display: none;
    position: absolute;
    top: 30px;
    left: 0;
    width: 100%;
    height: auto;
    border-bottom: 5px solid #000;
    background: red;
    text-align: left;

}

.nav-level-2-container {
    padding-top: 40px;
    padding-bottom: 40px;
    -ms-flex: 0px 1px auto;
    -webkit-box-flex: 0;
    -webkit-flex: 0px 1px auto;
    flex: 0px 1px auto;
}

li>a:hover + .nav-level-2{
    display: block;
  
} 

.nav-level-2:hover {
  display:block;
  
}


.row{
    display: flex;
    flex: 0 1 auto;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;    
}

.list-container {
    padding: 0px;
}

.col-lg-2{
    flex-basis: 16.666666667%;
    max-width: 16.666666667%;
    box-sizing: border-box;
    display: flex;
    flex: 0 1 auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-flex: 0;
    background: red;
    margin-left: 5px;
    
}

.main-nav>.inner .nav-level-2 .nav-level-2-container .heading {
    text-transform: uppercase;
    color: #000;
    letter-spacing: 1px;
    margin-bottom: 20px;
    font-size: 14px;
    margin: 0 0 20px;
}
＆＃13; 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<nav class="main-nav">
  <div class="inner max-girdle-width">
    <div class="nav-links-container">
      <ul class="nav-links">
        <li class="nav-whats-new"> <a class="nav-level-1" href="#">What's New</a>
          <div class="nav-level-2">
            <div class="nav-level-2-container row max-girdle-width">
              <div class="list-container shop col-lg-2">
                <h3 class="heading"> Shop by</h3>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

查看编辑过的jQuery。这就是我改变的。将背景none更改为透明并添加颜色css样式。

这是你想要的吗？

.main-nav {
    background: #000;
    height: 30px;
    position: relative;
    overflow: visible;
    z-index: 2;
    width: 100%;
    left: 0;
    cursor: default;
}

.main-nav .inner{
    height: 100%;
}

.main-nav>.inner{
    text-align: justify;
}

.nav-links-container {
    position: static;
    /* background: red; */
    height: 100%;
    
}

.nav-links{
    padding: 0 0 0 3px;
    display: inline;
    margin-bottom: 20px;
    overflow: hidden;
     /*background-color: green; */
}

li {
    vertical-align: top;
    padding: 5px;
    display: inline-block;
    /* background: blue; */
}

li>a {
    color: #FFF;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 10px 9px 9px;
    margin: 0 -3px;
}
li>a:hover {
    background-color: white;
    color:#000;    
}

.nav-level-2 {
    display: none;
    position: absolute;
    top: 30px;
    left: 0;
    width: 100%;
    height: auto;
    border-bottom: 5px solid #000;
    background: red;
    text-align: left;

}

.nav-level-2-container {
    padding-top: 40px;
    padding-bottom: 40px;
    -ms-flex: 0px 1px auto;
    -webkit-box-flex: 0;
    -webkit-flex: 0px 1px auto;
    flex: 0px 1px auto;
}

li>a:hover + .nav-level-2{
    display: block;
  
} 

.nav-level-2:hover {
  display:block;
  
}


.row{
    display: flex;
    flex: 0 1 auto;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;    
}

.list-container {
    padding: 0px;
}

.col-lg-2{
    flex-basis: 16.666666667%;
    max-width: 16.666666667%;
    box-sizing: border-box;
    display: flex;
    flex: 0 1 auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-flex: 0;
    background: red;
    margin-left: 5px;
    
}

.main-nav>.inner .nav-level-2 .nav-level-2-container .heading {
    text-transform: uppercase;
    color: #000;
    letter-spacing: 1px;
    margin-bottom: 20px;
    font-size: 14px;
    margin: 0 0 20px;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<nav class="main-nav">
<div class="inner max-girdle-width">
                        <div class="nav-links-container">
                          <ul class="nav-links">
                            <li class="nav-whats-new"> <a class="nav-level-1" href="#">What's New</a>
  <div class="nav-level-2">
                                <div class="nav-level-2-container row max-girdle-width">
                                   <div class="list-container shop col-lg-2">
                                                   <h3 class="heading"> Shop by</h3> 
                                                    
                                   </div>
                                </div>
                              </div>
                            </li>
                          </ul>
                        </div>
                      </div>
                    </nav>
import sys
s1=input().rstrip()
s1l=[]
for i in s1:
    s1l.append(i)
s2=input().rstrip()
s2l=[];sol=[]
for i in s2:
    s2l.append(i)
ls=len(s1l)
for i in range(ls):
    for j in range(ls):
        for k in range(ls):
            sol.append((s1[i]+s1[j]+s1[k]))
for i in sol: 
    if i==s2:
        print('s1 is a kangaroo word of s2')
        sys.exit()
print('s1 is Not a kangaroo word of s2')

相关问题
最新问题