롤오버에서 테두리 색을 어떻게 변경합니까?

나는 텍스트 상자가있는 웹 페이지를 쓰고있다. 테두리 색을 변경하여 마우스를 굴릴 때 텍스트를 강조 표시하려고하지만 작동하지 않습니다. 롤오버에서 테두리 색을 어떻게 변경합니까?

이

내 HTML 코드

<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame 
    Remove this if you use the .htaccess --> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 

    <title>main</title> 
    <meta name="description" content="" /> 
    <meta name="author" content="Zolani" /> 

    <meta name="viewport" content="width=device-width; initial-scale=1.0" /> 

    <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references --> 
    <link rel="shortcut icon" href="/favicon.ico" /> 
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" /> 
    <title>canvas</title> 
    <meta name="description" content="" /> 
    <meta name="author" content="Zolani" /> 
    <link rel="stylesheet" type="text/css" href="canvas.css"/> 
    <script type="application/javascript" src="canvas.js"></script> 
</head> 

<body> 
    <div class="title"> 
     Linear Algebra. 
    </div> 
    <div> 
     <div class="box" onmouseover="light()"> 
      <h1 class="boxtitle"> Matrix </h1> 

      <p> 
       Here are some matrixes. They're pretty cool, to 
       be honest thing! 
      </p> 
     </div> 
     <div class ="box" onmouseover="light()"> 
      <h1 class="boxtitle"> Subspaces </h1> 

      <p> 
       Example 
      </p> 
     </div> 
    </div> 

</body>

내 CSS 코드 압연 때 흰색으로 사업부의 테두리를 변경하려면

body { background: #AC00BF } 

.title { 
    position: absolute; 
    left: 800px; 
    top: 20px; 
    color: black; 
    font-size: 4.8em; 
    font-family: sans-serif; 
} 

.box { 
    color: white; 
    font-family: sans-serif; 
    font-size: 12px; 
    background: black; 
    border-style: solid; 
    border-width: 4px; 
    border-color: black; 
    margin: 2cm 2cm 2cm 2cm; 
    max-width: 300px; 
    max-height: 200px; 
} 

.boxtitle { 
    font-size: 18px; 
    font-family: Georgia; 
}

위에. 상자의 변형을 사용하려고했습니다. 마우스를 올리면 작동하지만 작동하지 않습니다. 또한 a.box를 사용했습니다. 구현 된 태그로 마우스를 가져 가면 div가 링크처럼 표시됩니다.

어떻게이 div의 테두리 색을 흰색으로 전환 할 수 있습니까?

.box:hover{ 
    border-color: white 
}

당신은 순서를 주목했습니다 (다음 예제가 작동하지 않습니다) :

.box { 
    border-color: black 
} 

.box:hover{ 
    border-color: white 
}

Demo

출처

2012-12-21 Zolani13

은 나를 위해 일했다 :hover CSS 선택기를 사용하지 않습니까?

div.box { 
     ... 
     border-color: black; (
    } 

    div.box:hover { 
     border-color: white; 
    }

출처

2012-12-21 21:14:22 yckart

그는 –

이 @Radio ♥ ... 고정이 – yckart

내가 : 빨간색 더 좋아 ;-) ... =)) 백색 요청 – Geo

왜 .box에 :hover를 사용

출처

2012-12-21 21:14:36 Tunnecino

롤오버에서 테두리 색을 어떻게 변경합니까?

답변

관련 문제