부트 스트랩 3 마우스 오버 이미지 반응 형

부트 스트랩 3에 반응 형 이미지 마우스 오버를위한 해결책이 있습니까? http://jsfiddle.net/4gac7/부트 스트랩 3 마우스 오버 이미지 반응 형

.image{ 
background-image:url("http://placehold.it/350x150/000/fff"); 
width:350px; /* responsive possible ?? */ 
height:150px; 

} 
.image:hover{ 
background-image:url("http://placehold.it/350x150/ccc/fff"); 
}

감사합니다 :

여기 내 코드입니다!

출처

2014-01-22 l00per

당신은 더 설명 할 수 있습니까? 나는 이해하지 못한다. – pbenard

나는 이와 같은 반응 마우스 오버 이미지를 원합니다. http://jsfiddle.net/4gac7/1/ 모바일에서는 이미지를 터치 할 수 있고 이미지 위에 마우스가 표시됩니다. 문제는 div가 너비와 높이를 필요로하기 때문에 반응이 없습니다. – l00per

더 많은 HTML 코드가 필요하지만 http://alistapart.com/article/creating-intrinsic-ratios-for-video/과 동일한 기본 기술을 사용할 수 있습니다. 배경 이미지에 고유 한 크기가 없으므로 어딘가에 너비를 설정해야하지만 부모 요소에서 올 수 있습니다. 본질적으로 :

<div class="wrapper-with-intrinsic-ratio"><div class="element-to-stretch"></div></div> 

.wrapper-with-intrinsic-ratio { 
    position: relative; 
    padding-bottom: 20%; /* Adjust this to suit the aspect ratio of the image */ 
    height: 0; 
    width: 100%; 
} 
.element-to-stretch { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-image: url("http://placehold.it/350x150/000/fff"); 
    background-size: cover; 
} 
.element-to-stretch:hover { 
    background-image: url("http://placehold.it/350x150/ccc/fff"); 
}

여기는 some documentation on background-size입니다. 둘째, 종횡비가 까다로울 수 있습니다. 비율이 2 : 1 (따라서 이미지의 너비가 높이의 2 배입니다) 인 경우 의 padding-bottom은 50%입니다. 그것을 (높이 ÷ 너비) × 100으로 해결하십시오. 따라서 예를 들어 350x150 픽셀 이미지는 padding-bottom: 42.857%;이고 150x350px it'd be 233.333% 이미지 일 것입니다.

또는 두 개의 img 요소를 사용하여 수행 할 수도 있습니다. 부끄럽지만 ...

<div> 
    <img src="normal.jpg" alt="" class="normal"><img src="hover.jpg" alt="" class="hover"> 
</div> 

div img { max-width: 100%; height: auto; } 
div img.normal, 
div:hover img.hover { display: block; } 
div img.hover, 
div:hover img.normal { display: none; }

또는 자바 스크립트를 사용할 수 있습니다.

출처

2014-01-22 11:01:13

아, 아주 좋아 보인다. 고맙습니다! http://jsfiddle.net/4gac7/2/ – l00per

문제 없습니다. 두 가지 : 여기 [배경 크기의 문서] (https://developer.mozilla.org/en-US/docs/Web/CSS/background-size)가 있습니다. 두 번째로 종횡비가 까다로울 수 있습니다 : 비율이 2 : 1 (이미지가 두 배의 높이이므로)이면 '래퍼와 내장 비율'의 '패딩 하단'은 ' 50 %'. 그것을 (높이 ÷ 너비) × 100으로 작업하십시오. 따라서 350x150 픽셀 이미지의 경우 '패딩 하단 : 42.857 %'이고 150x350 픽셀의 경우 '233.333 %'입니다. 나는 이것을 대답으로 편집 할 것이다. –

또는 간단한 onmouseover html 태그 &을 사용하여 부트 스트랩에서 img-responsive 클래스를 제공 할 수 있습니다.

.img-responsive, 
 
.thumbnail > img, 
 
.thumbnail a > img, 
 
.carousel-inner > .item > img, 
 
.carousel-inner > .item > a > img { 
 
    display: block; 
 
    max-width: 100%; 
 
    height: auto; 
 
}

<div class="col-lg-6"> 
 
<img src="http://placehold.it/350x150/000/fff" onmouseover="this.src='http://placehold.it/350x150/ccc/fff'" onmouseout="this.src='http://placehold.it/350x150/000/fff'" class="img-responsive"> 
 
</div>

http://jsfiddle.net/McKmillions/7t63cja2/

출처

2015-06-16 01:51:53

매우 쉽다 .. 고마워. –

부트 스트랩 3 마우스 오버 이미지 반응 형

답변

관련 문제