CSS border dissapear on hover

-1

У меня проблемы с моим StyleSheet, и я понятия не имею, что делать дальше.CSS border dissapear on hover

Я создал

<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>, что кнопка находится.

Я использую этот кусок кода, чтобы сделать весь текст исчезнет, но граница оставаться в любом случае.

.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 и 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') –

Вы можете сделать это, скрывая контейнер вместо содержимого

.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 border dissapear on hover

ответ

Смежные вопросы