懸停時CSS邊框消失

-1

我遇到了StyleSheet的問題，我不知道下一步該怎麼做。懸停時CSS邊框消失

我創建

<p class="button">MORE</p>

，因爲我想要的文字，看起來像按鈕。

這是我用來修改它的CSS部分。

.content .bothead a.part .dole p.button{font-size: 16px;border: 2px solid #6d6d6d;padding: 10px 0px 10px 0px; margin-bottom: 10px; border-radius: 25px; -webkit-border-radius: 25px; -moz-border-radius: 25px;}

問題開始時，我想這個按鈕可以把鼠標放在整個<a>該按鈕是在後dissapear。

我使用這段代碼，以使整個文本消失，但邊境留反正。

.content .bothead a.part:hover {color: transparent; border: transparent;}

我設法擺脫邊界使用這一點的代碼，使其消失。

.content .bothead a.part .dole p.button:hover {color: transparent; border: transparent !important;}

問題是，與此代碼我有超過該按鈕懸停鼠標和我想設置透明的顏色，當我懸停鼠標移到整個<a>。

.content .bothead a.part:hover { 
 
    color: transparent; 
 
    border: transparent; 
 
}

 <a class="part treti" title="" href=""> 
 
     <p class="nadpis">Title</p> 
 
     <div class="dole"> 
 
      <p>child1</p> 
 
      <p>child2</p> 
 
      <p class="button">MORE</p> 
 
     </div> 
 
     </a>

想法是，當鼠標懸停在<a class="part treti" title="" href="">這些都應該消失。通過我的代碼，我設置了全部透明，只留下按鈕的邊框。

來源

2016-11-08 Tahak

你想要什麼，你能清楚地告訴我嗎？ –

你能包括一個工作示例/小提琴嗎？ – GvM

您希望邊框顯示在正常位置，並在懸停時消失？你必須爲了......而盤旋。 –

我希望這可以幫助，雖然我覺得這不是一個正確的事情，有一個div和段內錨標記..

<!DOCTYPE> 
<html> 
    <head> 
     <style type="text/css"> 
     .content .bothead a.part .dole p.button { 
     font-size: 16px; 
     border: 2px solid #6d6d6d; 
     padding: 10px 0px 10px 0px; 
     margin-bottom: 10px; 
     border-radius: 25px; 
     -webkit-border-radius: 25px; 
     -moz-border-radius: 25px; 
    } 
    .content .bothead a.part:hover .dole p.button { 
     color: transparent; 
     border: transparent; 
     } 
    .content .bothead a.part:hover { 
     text-decoration: none; 
    } 
</style> 
</head> 
<body> 
    <div class="content"> 
    <div class="bothead"> 
     <a class="part" href="#"> 
      <div class="dole"> 
       <p class="button">Hello</p> 
      </div> 
     </a> 
    </div> 
</div> 
</body> 

</html>

來源

2016-11-08 14:37:19

用這樣的方式：

如果該按鈕嵌套在DIV

yourDivName:hover button{ 
    color: transparent; 
    border: transparent !important; 
}

並請分享你的HTML裏面，所以它很容易回答的問題。

來源

2016-11-08 14:10:17

他在他的代碼中使用的「重要」。這裏我只是指出了選擇器應該如何（'yourDivName：hover button'） –

您可以通過隱藏的容器，而不是內容的做

.button { 
 
    font-size: 16px;border: 2px solid #6d6d6d; 
 
    padding: 10px 0px 10px 0px; 
 
    margin-bottom: 10px; 
 
    border-radius: 25px; 
 
    -webkit-border-radius: 25px; 
 
    -moz-border-radius: 25px; 
 
} 
 

 
.content:hover { 
 
    color: transparent; 
 
    border: transparent !important; 
 
}

<div class="content"> 
 
    <p class="button">MORE</p> 
 
</div>

來源

2016-11-08 14:12:45

您應用樣式p.button:hover {...}
和將它們設置爲所需的DIV：.content .bothead a.part .dole:hover p.button {...}

來源

2016-11-08 14:17:30 Alex

懸停時CSS邊框消失

回答

相關問題