html - CSS border dissapear on hover -
i'm having trouble stylesheet , have no idea next.
i created
<p class="button">more</p>
since wanted text looks button.
this css part i'm using modify it.
.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;}
problems begin when want button dissapear after putting mouse on whole <a>
button in.
i'm using bit of code make whole text disappear border stay anyways.
.content .bothead a.part:hover {color: transparent; border: transparent;}
i managed rid of border using bit of code make disappear.
.content .bothead a.part .dole p.button:hover {color: transparent; border: transparent !important;}
problem code have hover mouse on button , set transparent color when hover mouse on whole <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>
idea is, while hovering on <a class="part treti" title="" href="">
these should disappear. code set transparent, border on button stay.
i hope helps though feel not semantically right thing have div , para inside anchor tag..
<!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>
Comments
Post a Comment