[html] CSS : img : hover에서 이미지 src 변경

Program / 글쓴이

에서 <img>소스 URL 을 변경해야합니다 hover.

나는 이것을 시도했지만 작동하지 않습니다.

HTML

<img id="my-img" src="http://dummyimage.com/100x100/000/fff"/>

CSS

#my-img:hover {
    content: url('http://dummyimage.com/100x100/eb00eb/fff');
}

jsFiddle

어떤 도움을 주시면 감사하겠습니다.

최신 정보:

이것은 Webkit / Google Chrome에서만 작동합니다.

답변

html과 css만으로는 이미지의 src를 변경할 수 없습니다. img 태그를 div 태그로 바꾸면 배경으로 설정된 이미지를 다음과 같이 변경할 수 있습니다.

div {
    background: url('http://dummyimage.com/100x100/000/fff');
}
div:hover {
    background: url('http://dummyimage.com/100x100/eb00eb/fff');
}

그리고 일부 자바 스크립트 코드를 사용할 수 있다고 생각하면 아래와 같이 img 태그의 src를 변경할 수 있습니다.

function hover(element) {
  element.setAttribute('src', 'http://dummyimage.com/100x100/eb00eb/fff');
}

function unhover(element) {
  element.setAttribute('src', 'http://dummyimage.com/100x100/000/fff');
}
<img id="my-img" src="http://dummyimage.com/100x100/000/fff" onmouseover="hover(this);" onmouseout="unhover(this);" />

스 니펫 확장

답변

Patrick Kostjens와 관련된 몇 가지 변경 사항을 수정했습니다.

<a href="#">
<img src="http://icons.iconarchive.com/icons/fasticon/angry-birds/128/yellow-bird-icon.png" 
onmouseover="this.src='http://icons.iconarchive.com/icons/fasticon/angry-birds/128/red-bird-icon.png'"
onmouseout="this.src='http://icons.iconarchive.com/icons/fasticon/angry-birds/128/yellow-bird-icon.png'"
border="0" alt=""/></a>

데모

http://jsfiddle.net/ssuryar/wcmHu/429/

답변

비슷한 문제가 있었지만 내 해결책은 두 개의 이미지, 하나는 숨겨져 있고 하나는 표시되는 것입니다. 주변 범위 위로 마우스를 가져 가면 원본 이미지가 display : none으로 변경되고 다른 이미지는 display : block으로 변경됩니다. (상황에 따라 대신 ‘인라인’을 사용할 수 있음)

이 예제는 이미지 대신 두 개의 span 태그를 사용하므로 여기에서 실행할 때 결과를 볼 수 있습니다. 불행히도 사용할 온라인 이미지 소스가 없었습니다.

#onhover {
  display: none;
}
#surround:hover span[id="initial"] {
  display: none;
}
#surround:hover span[id="onhover"] {
  display: block;
}
<span id="surround">
    <span id="initial">original</span>
    <span id="onhover">replacement</span>
</span>

스 니펫 확장

답변

당신이 할 수있는 일은 실제 이미지를 숨기고 원하는 것을하기 위해 CSS를 적용하기 위해 설정 width하고 height0 으로 설정하여 약간의 속임수를 쓰는 것입니다 .

#aks {
    width:0px;
    height:0px;
    background:url('http://dummyimage.com/100x100/000/fff');
    padding:50px;
}

#aks:hover {
    background: url('http://dummyimage.com/100x100/eb00eb/fff');
}

그리고 img태그를 원하는 크기로 만드는 패딩 (실제 이미지 크기의 절반).

깡깡이

답변

다음은 순수 CSS를 사용하는 대체 접근 방식입니다. 아이디어는 HTML 마크 업에 두 이미지를 포함하고 이에 따라 표시되거나 숨겨지는 것입니다. : hover

HTML

<a>
   <img src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_15-128.png" /> 
   <img src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_12-128.png" />
</a>

CSS

a img:last-child {
  display: none;  
}
a:hover img:last-child {
  display: block;  
}
a:hover img:first-child {
  display: none;  
}

jsfiddle : https://jsfiddle.net/m4v1onyL/

사용 된 이미지는 적절한 표시를 위해 동일한 크기입니다. 또한 이러한 이미지 파일 크기는 매우 작기 때문에 다중로드는이 경우 문제가되지 않지만 큰 크기의 이미지 표시를 전환하려는 경우에 발생할 수 있습니다.

답변

의미론과 관련하여 지금까지 제공된 솔루션이 마음에 들지 않습니다. 따라서 개인적으로 다음 솔루션을 사용합니다.

.img-wrapper {
  display: inline-block;
  background-image: url(https://www.w3schools.com/w3images/fjords.jpg);
}

.img-wrapper > img {
  vertical-align: top;
}

.img-wrapper > img:hover {
  opacity: 0;
}
<div class="img-wrapper">
  <img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="image" />
</div>

스 니펫 확장

이것은 브라우저 호환성이 좋은 CSS 전용 솔루션입니다. 처음에는 이미지 자체에 의해 숨겨진 배경이있는 이미지 래퍼를 사용합니다. 마우스를 올리면 이미지가 불투명도를 통해 숨겨 지므로 배경 이미지가 표시됩니다. 이렇게하면 빈 래퍼가 아니라 마크 업 코드에 실제 이미지가 있습니다.

답변

해결책이 하나 더 있습니다. AngularJs를 사용하는 사람이 있다면 :
http://jsfiddle.net/ec9gn/30/

<div ng-controller='ctrl'>
    <img ng-mouseover="img='eb00eb'"  ng-mouseleave="img='000'"
         ng-src='http://dummyimage.com/100x100/{{img}}/fff' />
</div>

자바 스크립트 :

function ctrl($scope){
    $scope.img= '000';
}

CSS 없음 ^^.