마우스 오버시 이미지 및 색상 오버레이
Yashar
이미지 위로 마우스를 가져갈 때 색상 오버레이 (및 이미지)가 표시되는 데 어려움을 겪고 있습니다.
기본적으로 사용자는이 오버레이를 볼 수 있어야합니다 (아래 2에서 구분됨).
다음 HTML 스 니펫이 있습니다.
<ul id="Grid">
<li class="mix category_1 mix_all" style="display: inline-block; opacity: 1;">
<img src="http://i.imgur.com/J4PaouI.jpg" alt="#">
</li>
</ul>
다음은 특정 CSS (그리고 확실히하기 위해 Z- 색인)입니다.
.mix_all:hover {
background: url(http://i.imgur.com/0lu7dWs.png) no-repeat center !important;
background-color: #de6573 !important;
z-index: 99999999;
}
#Grid .mix {
width: 200px;
height: 200px;
margin-bottom: 20px;
}
.mix.mix_all img {
max-height: 200px;
max-width: 200px;
}
다음은 바이올린에 대한 링크입니다.
막심 글 라드 코프
올바른 버전은 다음과 같습니다. http://jsfiddle.net/maximgladkov/b2twr/1/
추가 요소를 추가 position: absolute하고 표시해야합니다.
HTML
<ul id="Grid">
<li class="mix category_1 mix_all">
<img src="http://i.imgur.com/J4PaouI.jpg" alt="#" />
<div class="overlay"></div>
</li>
</ul>
CSS
.mix_all {
position: relative;
}
.mix_all .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.mix_all:hover .overlay {
background: url(http://i.imgur.com/0lu7dWs.png) no-repeat center !important;
background-color: #de6573 !important;
z-index: 99999999;
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
마우스 오버시 색상 투명도 오버레이
- 2
마우스 오버 된 이미지 텍스트 오버레이 색상 문제
- 3
이미지의 가운데 텍스트 및 마우스 오버시 텍스트 색상 변경
- 4
은하 시뮬레이션 : 포인트 색상 변경 및 마우스 오버시 텍스트 표시
- 5
마우스 오버시 색상 페이드 인 및 페이드 아웃
- 6
마우스 오버시 여러 색상 오버레이가있는 Div
- 7
마우스 오버시 이미지 및 레이블에 대한 JQuery 효과
- 8
마우스 오버시 이미지 위에 오버레이
- 9
마우스 오버 및 마우스 아웃시 이미지 깜박임
- 10
Gridview ImageButton 마우스 오버 및 마우스 아웃시 이미지 변경
- 11
마우스 오버시 이미지 확대 / 축소 및 상위 div 테두리를 초과하지 않음
- 12
Jquery로 마우스 오버시 메뉴 색상 페이드
- 13
강제 방향 레이아웃, 마우스 오버시 소스 및 대상 값 목록
- 14
마우스 오버 및 클릭시 블록 색상 변경 (및 활성 상태 유지)
- 15
버튼, 텍스트 및 인라인 요소의 색상이 다르며 둘 다 마우스 오버시 색상을 변경할 수 있어야합니다.
- 16
마우스 오버 이미지 및 광선 [부트 스트랩]
- 17
마우스 오버시 이미지 및 관련 텍스트 변경
- 18
마우스 오버시 버튼 및 i 클래스의 색상 변경
- 19
마우스 오버시 이미지 위에 텍스트 오버레이
- 20
css 만 사용하여 마우스 오버시 오버레이 이미지
- 21
이미지 링크의 마우스 오버시 검은 색 밑줄 제거
- 22
마우스 오버시 버튼 배경 이미지, 텍스트 및 모양을 동시에 변경
- 23
마우스 오버시 언더 레이 이미지에서 트리거 된 투명 오버레이 이미지
- 24
마우스 오버시 색상 변경
- 25
마우스 오버시 색상 변경
- 26
jQuery-마우스 오버시 상위 div에 이미지 앞에 추가
- 27
Plotly에서 마우스 오버 / 클릭시 전체 트레이스의 색상 변경
- 28
마우스 오버 이미지, 특정 동영상 재생
- 29
여러 색상 행이있는 마우스 오버 테이블
몇 마디 만하겠습니다