[css] div 배경색, onhover 변경

Program / 글쓴이

마우스를 위에 놓을 때 div의 배경색을 변경 하려고합니다 .

div {background : white;}
div a : hover {background : grey; 폭 : 100 %;
표시 : 블록; 텍스트 장식 : 없음;}

div 내부 의 링크 만 배경색을 가져옵니다 .

전체 div가 배경색을 갖도록 하려면 어떻게해야 합니까?

감사합니다

편집 :
전체 div를 링크로 사용하려면 어떻게해야합니까?-해당 div의 아무 곳이나 클릭하면 주소로 이동합니다.

답변

” a:hover“는 말 그대로 브라우저에 <a>마우스를 가져 가면 -tag 의 속성을 변경하도록 지시 합니다. 당신이 의미하는 것은 the div:hoverdiv가 선택 될 때 트리거되는 대신 ” “입니다.

특정 div를 하나만 변경하려면 ID ( ” <div id='something'>“)를 지정하고 #something:hover {...}대신 CSS ” “를 사용하십시오. div 그룹을 편집하려면 클래스 ( ” <div class='else'>“) 로 만들고이 경우 CSS ” .else {...}“를 사용하십시오 (클래스 이름 앞의 마침표에 유의하십시오!)

답변

자바 스크립트 사용 

   <div id="mydiv" style="width:200px;background:white" onmouseover="this.style.background='gray';" onmouseout="this.style.background='white';">
    Jack and Jill went up the hill
    To fetch a pail of water.
    Jack fell down and broke his crown,
    And Jill came tumbling after.
    </div>

답변

앵커를 둘 필요가 없습니다. 호버시 div의 스타일을 변경하려면 호버시 div의 배경색을 변경하십시오.

<div class="div_hover"> Change div background color on hover</div>

.css 페이지

.div_hover { background-color: #FFFFFF; }

.div_hover:hover { background-color: #000000; }

답변

전체 div를 링크로 사용하려면 앵커 태그를 다음과 같이 설정하십시오.

display: block

앵커 태그의 높이를 100 %로 설정합니다. 그런 다음 div 태그에 고정 높이를 설정합니다. 그런 다음 평소처럼 앵커 태그의 스타일을 지정하십시오.

예를 들면 :

<html>
<head>
    <title>DIV Link</title>

    <style type="text/css">
    .link-container {
        border: 1px solid;
        width: 50%;
        height: 20px;
    }

    .link-container a {
        display: block;
        background: #c8c8c8;
        height: 100%;
        text-align: center;
    }

    .link-container a:hover {
        background: #f8f8f8;
    }

    </style>

</head>
<body>

    <div class="link-container">
        <a href="http://www.stackoverflow.com">Stack Overflow</a>
    </div>

    <div class="link-container">
        <a href="http://www.stackoverflow.com">Stack Overflow</a>
    </div>

</body> </html>

행운을 빕니다!

답변

html 코드 :

    <!DOCTYPE html>
    <html>
    <head><title>this is your web page</title></head>
    <body>
    <div class = "nicecolor"></div>
    </body>
    </html>

css 코드 :

    .nicecolor {
      color:red;
      width:200px;
      height:200px;
     }

    .nicecolor:hover {
      color:blue;
     }

마우스를 가져 가면 빨간색에서 파란색으로 div가 변경됩니다.

답변

세트

display: block;

에 일부 높이를 제공

답변

CSS의 “hover”속성을 시도하십시오. 예 :

<html>
<head>
    <style>
        div
        {
            height:100px;
            width:100px;
            border:2px solid red;
        }
        div:hover
        {
            background-color:yellow;
        }
    </style>
</head>
<body>
            <a href="#">
                      <div id="ab">
                                <p> hello there </p>
                      </div>
            </a>
</body>

이게 도움이 되길 바랍니다