div 배경색, onhover 변경
마우스를 위에 놓을 때 div의 배경색을 변경 합니다 .
div {배경 : 흰색;}
div a : hover {배경 : 회색; 폭 : 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>
이게 도움이 되길 바랍니다
div 주위에 앵커를 놓을 수 있습니다.
<a class="big-link"><div>this is a div</div></a>
그리고
a.big-link {
background-color: 888;
}
a.big-link:hover {
background-color: f88;
}
!important마우스를 올려도 배경색이 변경되지 않도록 CSS 파일 의 속성 을 만드십시오 .
예 :
.fbColor {
background-color: #3b5998 !important;
color: white;
}
참고 URL : https://stackoverflow.com/questions/676324/div-background-color-to-change-onhover
'IT' 카테고리의 다른 글
| 다음 섹션이 정의 레이아웃 페이지 "~ / Views / Shared / _Layout.cshtml"에 대해 논의되지 않습니다. "서비스" (0) | 2020.09.11 |
|---|---|
| bash에서 json 파일을 구문 분석하기 위해 jq 출력에서 큰 따옴표를 제거하는 방법은 무엇입니까? (0) | 2020.09.11 |
| 폴더에서 특정을 가진 파일 찾기 (0) | 2020.09.11 |
| Python에서 빠른 쉬운 파일 대화? (0) | 2020.09.11 |
| C ++에서 노드를 문자 배열로 변환하는 방법은 무엇입니까? (0) | 2020.09.11 |