CSS - 이미지 링크의 테두리 색상을 제어 할 수 없습니다

오늘 여러 시간 동안 문제가 발생했습니다.이 문제가 해결되지 않을 수 있습니다. 어쩌면 도움이 될 수 있습니다. 커서를 가져 가면 테두리 색을 변경하려고합니다. 링크 내부 이미지 (<a> 태그)의 마우스CSS - 이미지 링크의 테두리 색상을 제어 할 수 없습니다

다른 것들에도 bootstrap.min.css를 사용하고 있습니다 만, 당신의 환경에서 문제를 확인할 수 있도록 작은 테스트 케이스를 만들었습니다.

나는 그것이 여기 작은 시험을 위해 모든 코드를 격리 내 문제 시뮬레이션 :

내 HTML 파일 :

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>@ViewBag.Title - My ASP.NET Application</title> 
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css"> 
    <link rel="stylesheet" type="text/css" href="theme.css"> 
</head> 
<body> 
    <a class="thumbnail" href="/Details/GetCategoryDetail/2"> 
     <img src="http://placehold.it/400x250/000/fff" alt="" /> 
    </a> 
</body>

내 CSS 파일

a:hover{ 

    border-color: blue; 
    border-width: 10px; 
} 

a {  
    border-color:red; 
    border-width:10px; 
}

을 어쨌든 마우스를 올려 놓을 때마다 색상이 동일하게 유지됩니다 (파란색). 나는 크롬을 사용하여 검사 요소를 만들었고, 위에 선택된 색이 녹색이 아닌 "파랑"을 선택했습니다 ...

이것은 매우 이상합니다. 이해할 수 없습니다. 은 또한 다음을 시도 :

thumbnail a{ 
    border-color:red; 
    border-width:10px; 
} 

thumbnail a:hover{ 
    border-color:red; 
    border-width:10px; 
}

는 작동하지 않았다

는 난이 하나의 시도 :

이 이

thumbnail a img{ 
    border-color:red; 
    border-width:10px; 
} 

thumbnail a img:hover{ 
    border-color:red; 
    border-width:10px; 
}

는 또한 ... 어떤 작동하지 않았다 무슨 일이 일어나고 있는지에 대한 단서? 감사합니다!

출처

2016-09-18 TiagoM

당신은 (대신 thumbnail''의 .thumbnail''할) 기간을 사용하여 썸네일 클래스를 선택해야합니다. –

그런데 설명해 주시겠습니까? 언제 ('.'를 사용하여) 수업을 선택해야합니까? 아니면 CSS에 대한 좋은 지침서를 보내주세요. 지금 바보 같이 느껴지고 있습니다. – TiagoM

클래스를 선택할 때 마침표를 사용하고 ID를 선택할 때 파운드 기호를 사용하며 HTML 요소를 선택하는 경우에는 사용하지 않습니다 (예 : 'a' 태그 나'img' 태그를 선택하는 기호는 원시 HTML 요소이므로'my-image' 클래스가 있으면'.my-image'로 선택합니다.) [이 튜토리얼] (https://www.tutorialspoint.com/css/css_syntax.htm)에서 더 많은 통찰력을 줄 수도 있습니다. –

이미지를 선택하고 포함 링크 태그가 아닌 이미지에 테두리를 적용해야합니다. 이 경우 앵커 태그는 높이/너비가 없으므로 테두리를 앵커 태그에 직접 적용 할 수 없습니다. 대신, 링크를 클릭 할 때 이미지에 테두리를 적용하십시오.

a:hover img{ 
 
    border-color: blue; 
 
} 
 

 
a img {  
 
    border: 10px solid red; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8" /> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <title>@ViewBag.Title - My ASP.NET Application</title> 
 
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css"> 
 
    <link rel="stylesheet" type="text/css" href="theme.css"> 
 
</head> 
 
<body> 
 
    <a class="thumbnail" href="/Details/GetCategoryDetail/2"> 
 
     <img src="http://placehold.it/400x250/000/fff" alt="" /> 
 
    </a> 
 
</body>

출처

2016-09-18 23:06:39

JEZZZ! 당신은 내 생명의 은인, 나는이 문제에 일주일 동안있을 것이라고, 나는이 문제를 발견하지 못했습니다, 문제는 너비/높이의 부모 태그입니다. 젠장! @SHBelsky 정말 고마워! 건배! 편집 : 최대한 빨리 받아 들일 것입니다. (몇 분 정도 기다려야합니다.) – TiagoM

문제 없습니다! 당신이 대답을 당신의 받아 들인 것으로 표시했는지 확인하십시오. :) –

그래! 걱정마! – TiagoM

CSS - 이미지 링크의 테두리 색상을 제어 할 수 없습니다

답변

관련 문제