如何獲得懸停功能的引導工作，我使用引導

Question

嗨，大家好，並與它的一些文字股利。但是，由於某些原因，基本的懸停功能在我嘗試時不起作用。

HTML：

<div class = "Text"> 
    <a class="navbar-brand" href="#"> 
     <h1>text1</h1> 
     <h2>text2</h2> 
     <h3>text3</h3><br/> 
    <p>Time to make this move to the side</p> 
    </a> 
</div> 

所有這些都是sepreate和被移動靠近彼此。我可以讓每一個鏈接，但我想這樣做，當你徘徊在他們的地區，他們都從白色變爲紅色。

我試過許多東西，但最好的一個我有是：

.Text h1:hover { 
    color: green; 
    height: 700px; 
} 

也試過這樣：

.Text *: hover { 
    color: green; 
} 

任何幫助將是巨大的

編輯：

對不起，我不認爲我提出了明確的問題，我想改變所有的顏色，爲h1 h2和H3和p標籤，當你將鼠標懸停在任何元素不只是H1

到目前爲止，我已經得到了最接近的是

.text h1:hover, h2:hover, h3:hover, p:hover { 
    color: green; 
} 

但是，單獨而不是一起做的。

Answer 1

的修復與您的.navbar-brand做，添加以下到它：

.navbar-brand:hover * { 
    color: green; 
} 

導致以下片段：

.Logo{ 
 
\t margin-top: 21px; 
 
} 
 

 
.Logo h1 { 
 
    font-family: lokicola-font; 
 
    font-size: 69px; 
 
    margin-top: -30px; 
 
    margin-left: 30px; 
 
\t width: 90px; 
 
\t float: left; 
 
\t color: #FFF; 
 
} 
 

 
.Logo h2 { 
 
    font-family: lokicola-font; 
 
    font-size: 79px; 
 
    margin-top: -26px; 
 
    margin-left: 5px; 
 
\t width: 90px; 
 
\t float: left; 
 
\t color: #FFF; 
 
} 
 

 
.Logo h3 { 
 
    font-family: 'Oswald', sans-serif; 
 
    font-size: 49px; 
 
    margin-top: -14px; 
 
    margin-left: 28px; 
 
\t width: 90px; 
 
\t float: left; 
 
\t color: #FFF; 
 
} 
 

 
.Logo p { 
 
    font-family: 'Oswald', sans-serif; 
 
    font-size: 19px; 
 
    margin-top: -26px; 
 
    margin-left: 15%; 
 
\t width: 330px; 
 
\t float: left; 
 
\t color: #FFF; 
 
} 
 

 
.Logo :hover { 
 
\t color: green; 
 
} 
 

 
.navbar-brand:hover * { 
 
    color: green; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
 
    <div class="container">  
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <div class = "Logo"> 
 
     <a class="navbar-brand" href="#"> 
 
      <h1>1oca</h1> 
 
      <h2>Cola</h2> 
 
      <h3>Journey</h3><br/> 
 
     <p>Refreshing the world, one story at a time</p> 
 
     </a> 
 
    </div> 
 
     </div> 
 
     <div class="navbar-collapse collapse"> 
 
      <ul class = "nav navbar-nav navbar-right"> 
 
       <li class="active"><a href="#">Home</a></li> 
 
       <li><a href="#">About</a></li> 
 
       <li class="dropdown"> 
 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Drinks<b class="caret"></b></a> 
 
       <ul class="dropdown-menu"> 
 
       <li><a href="#">Coca Cola</a></li> 
 
       <li><a href="#">Sprite</a></li> 
 
       <li><a href="#">Dr Pepper</a></li> 
 
       </ul> 
 
       </li> 
 
       <li><a href="#contact" data-toggle="modal">Contact</a></li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

你probleme是你有h1和空間之間的CSS：懸停

.text *:hover { 
 
    color: green; 
 
    height: 700px; 
 
}

<div class="text"> 
 
    <a class="navbar-brand" href="#"> 
 
    <h1>text1</h1> 
 
    <h2>text2</h2> 
 
    <h3>text3</h3><br/> 
 
    <p>Time to make this move to the side</p> 
 
    </a> 
 
</div>

Answer 3

在Dreamweaver剛剛測試這一點，我相信這是你想要的。

.text h1:hover, h2:hover, h3:hover, p:hover { 
 
    color: green; 
 
    height: 700px; 
 
}

<div class="text"> 
 
    <a class="navbar-brand" href="#"> 
 
     <h1>text1</h1> 
 
     <h2>text2</h2> 
 
     <h3>text3</h3><br/> 
 
    <p>Time to make this move to the side</p> 
 
    </a> 
 
</div>

Answer 4

找到了答案

.navbar-brand:hover h1, 
.navbar-brand:hover h2, 
.navbar-brand:hover h3, 
.navbar-brand:hover p { 
    color: green; 
}