Tahak Tahak - 28 days ago 11
CSS Question

CSS border dissapear on hover

I'm having trouble with my StyleSheet and I have no idea what to do next.

I created

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


since I wanted text that looks like button.

This is CSS part that I'm using to 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 I want this button to dissapear after putting mouse over whole that button is in.

I'm using this bit of code to make whole text disappear but border stay anyways.

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


I managed to get rid of border using this bit of code to make it disappear.

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


Problem is that with this code I have to hover mouse over that button and I would like to set transparent color when I hover mouse over whole .



.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 over
<a class="part treti" title="" href="">
these all should disappear. With my code I set all transparent, just border on button stay.

Answer

I Hope this helps though i feel it is not semantically a right thing to have a div and 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>