div의 배경 이미지 표시/숨기기

Question

현재 내가 가리키는 상태의 div에서 배경 이미지를 표시하고 숨길 수 있는지 알아 내려고하고 있습니다. HTML

<div class="thumb"> 
    <div class="text"> 
     Header<br> 
     Sub-header<br><br> 
     Date 
    </div> 
</div> 

<div class="thumb"> 
    <div class="text"> 
     Header<br> 
     Sub-header<br><br> 
     Date 
    </div> 
</div> 

<div class="thumb"> 
    <div class="text"> 
     Header<br> 
     Sub-header<br><br> 
     Date 
    </div> 
</div> 

는 CSS 그래서 기본적으로 당신이 위에 마우스를 올려 그렇게 할 때, 배경 이미지 및 배경색 교대 할

.thumb { 
    width: 400px; 
    height: 250px; 
    background-color: silver; 
    font-weight: bold; 
    background: url("http://www.imageurlhere.com") no-repeat 50% 50%; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

.text { 
    padding: 15px; 
} 

는 DIV 배경 이미지가 쇼 :
여기에 몇 가지 코드입니다 , mouseout에서 배경 이미지가 숨겨지고 배경색 (은색)으로 되돌아갑니다.

style="background-image: url('insert url here')" 

이 있습니다 :
은 그래서 저는 그들이 HTML을 통해 삽입해야합니다,이 의사 클래스를 통해-수있게 할되었지만 이것은 CMS 사이트와 같이 이미지가 즉시 변경됩니다 발견 가능하면 배경 이미지를 숨기고 표시 할 수 있습니까?

Answer 1

Javascript (또는 jQuery)를 사용하지 않습니까?

그렇지 않은 경우 jquery에서 .hover() 함수를 사용하는 해결책이 있습니다. 새 이미지에 새 클래스를 추가하고 싶지 않다고하셨습니다. 그래서 나는 .thumb 요소에 URL을 저장하도록 제안합니다.

HTML : 나는 data-hoverimage 속성에 각 썸네일의 URL을 저장

<div class="thumb" data-hoverimage="http://placekitten.com/250/400"> 
    <div class="text">Header 
     <br>Sub-header 
     <br> 
     <br>Date</div> 
</div> 
<div class="thumb" data-hoverimage="http://placekitten.com/250/300"> 
    <div class="text">Header 
     <br>Sub-header 
     <br> 
     <br>Date</div> 
</div> 
<div class="thumb" data-hoverimage="http://placekitten.com/400/250"> 
    <div class="text">Header 
     <br>Sub-header 
     <br> 
     <br>Date</div> 
</div> 

는 (당신이 원하는대로 할 수있다).

그런 다음 jQuery를 사용하여 호버 기능을 사용할 수 있습니다. 첫 번째 function은 커서가 끝났을 때를 나타내고, 두 번째는 커서가 빠져있는 경우입니다.

$(".thumb").hover(function(){ 
    var imgurl = $(this).data("hoverimage"); 
    $(this).css("background-image", "url(" + imgurl + ")") 
}, function(){ 
    $(this).css("background-image", ""); 
}); 

내가 여기에 작업 모델이 : 그래도 난 호버에 배경 이미지를 표시 할 http://jsfiddle.net/auURQ/

Answer 2

:hover 의사 클래스를 사용하여 이미지를 보이게하거나 사라지게 할 수없는 이유가 있습니까? 예를 들어

: 당신은 사업부별로 다른 이미지가있는 경우

div { 
    background-image: none; 
} 


div:hover { 
    background-image: url('insert url here'); 
} 

Answer 3

사용이 CSS를

.thumb:hover{ 
    background: url("http://www.imageurlhere.com") no-repeat 50% 50%; 
} 
.thumb { 
     width: 400px; 
     height: 250px; 
     background-color: silver; 
     font-weight: bold; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
} 

.text { 
    padding: 15px; 
} 

이

1 개의 방법)들을위한 공유 CSS를 만들어이 있고 마우스 오버 전용을위한 CSS 전용 CSS

#thumb1:hover{ 
    background: url("http://www.imageurlhere.com") no-repeat 50% 50%; 
} 
#thumb2:hover{ 
    background: url("http://www.imageurlhere.com") no-repeat 50% 50%; 
} 
.thumb { 
     width: 400px; 
     height: 250px; 
     background-color: silver; 
     font-weight: bold; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
} 

.text { 
    padding: 15px; 
} 

다른 방법으로는 JS 또는 JQuery 라이브러리를 사용하여 호버 설정 이벤트를 ...