호버 위에 CSS 테두리 사라짐

-1

내 StyleSheet에 문제가있어 다음 작업을 수행 할 생각이 없습니다. 나는 버튼과 같은 텍스트를 원하기 때문에 호버 위에 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

사용이 방법 : 해당 버튼에 해당 사업부

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

답변

관련 문제