CSSボーダーがホバリングで消える

-1

私は自分のスタイルシートに問題があり、次は何をするのか分かりません。CSSボーダーがホバリングで消える

私はボタンのように見えるテキストを望んでいたので、私は

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

を作成しました。

これは私が修正するために使用しているCSSの部分です。私は、このボタンは、ボタンが中にある全<a>の上にマウスを置く後に消えるしたいとき

.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 {color: transparent; border: transparent;}

このコードを使用して境界線を消して、消滅させることができました。

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

問題は、このコードで、私はそのボタンの上にマウスを移動する必要があると私は、私は全体<a>の上にマウスを置くと透明色を設定したいということです。これらのすべてが消えるはず<a class="part treti" title="" href="">の上にマウスを移動しながら、

.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>

アイデアは、あります。私のコードでは、すべての透明を設定し、ちょうどボタンの滞在の境界。

出典

2016-11-08 Tahak

あなたは私に明確に＆短く教えていただけますか？ –

実例/フィドルを含めることができますか？ – GvM

ボーダーを標準で表示し、ホバーすると消えますか？あなたは...何のためにホバーする必要がありますか？ –

アンカータグの中にdivとparaを持つのが意味的に正しいとは思えないが、これが助けてくれることを願っています。

<!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'） –

あなたはp.button:hover {...}
のスタイルを適用すると、あなたが希望のdivにそれらを設定する代わりに、コンテンツ

.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

のコンテナを非表示にすることで、それを行うことができます：.content .bothead a.part .dole:hover p.button {...}

出典

2016-11-08 14:17:30 Alex

CSSボーダーがホバリングで消える

答えて

関連する問題