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

에서 <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 없음 ^^.

비슷한 문제가 발생했습니다. : hover에서 그림을 바꾸고 싶지만 Bootstrap의 적응 형 디자인이 부족하여 BACKGRUND-IMAGE를 사용할 수 없습니다.

나를 좋아한다면 : hover (특정 이미지 태그에 대한 변경 SRC를 고집하지 않음)에서 그림을 변경하려면 다음과 같이 할 수 있습니다-CSS 전용 솔루션입니다.

HTML :

<li>
  <img src="/picts/doctors/SmallGray/Zharkova_smallgrey.jpg">
  <img class="hoverPhoto" src="/picts/doctors/Small/Zharkova_small.jpg">
</li>

CSS :

li { position: relative; overflow: hidden; }
li img.hoverPhoto {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  opacity: 0;
}
li.hover img { /* it's optional - for nicer transition effect */
  opacity: 0;
  -web-kit-transition:  opacity 1s ease;
  -moz-transition:  opacity 1s ease;li 
  -o-transition:    opacity 1s ease;
  transition:   opacity 1s ease;
}
li.hover img.hoverPhoto { opacity: 1; }

IE7 호환 코드를 원하는 경우 불투명도가 아닌 위치를 지정하여 : HOVER 이미지를 숨기거나 표시 할 수 있습니다.

srcCSS로 변경할 수 없으므로 jQuery가 옵션 인 경우이 바이올린을 확인하십시오.

데모

$('#aks').hover(
    function(){
      $(this).attr('src','http://dummyimage.com/100x100/eb00eb/fff')
    },
    function(){
      $(this).attr('src','http://dummyimage.com/100x100/000/fff')
    }
)

기본적으로 .hover()방법을 사용하고 있습니다. 작동하려면 두 가지 기능이 필요합니다. 호버를 입력하고 종료 할 때.

우리는 사용 .attr의 변화에 (속성에 대한 짧은) src속성을.

이 작업을 수행하려면 바이올린과 같이 jQuery 라이브러리가 포함되어 있어야합니다.

깡깡이

AshisKumar의 답변에 동의
하면 아래와 같이 jQuery 기능을 사용하여 마우스 오버시 이미지 URL을 변경하는 방법이 있습니다.

$(function() {
  $("img")
    .mouseover(function() { 
        var src = $(this).attr("src").match(/[^\.]+/) + "over.gif";
        $(this).attr("src", url1); //URL @the time of mouse over on image
    })
    .mouseout(function() {
        var src = $(this).attr("src").replace("over", "");
        $(this).attr("src", url2); //default URL
    });
 });

개인적으로 JavaScript / jQuery 솔루션 중 하나를 사용합니다. 이렇게하면 HTML 의미가 유지 될뿐만 아니라 (즉, 이미지가 마크 업에 정의 된 일반적인 src 이미지와 함께 img 요소로 표시됨) JS / jQuery 솔루션을 사용하는 경우 JS / hover 이미지 를 미리로드하는 jQuery .

마우스 오버 이미지를 미리로드하면 사용자가 원본 이미지 위로 마우스를 가져갈 때 다운로드 지연이 없을 가능성이 높아 사이트가 훨씬 더 전문적으로 작동합니다.

그것은 당신이 JS에 의존한다는 것을 의미하지만, JS가 활성화되지 않은 소수는 아마도 너무 소란스럽지 않을 것입니다. 그리고 다른 모든 사람들은 더 나은 경험을 얻을 것입니다 ... 그리고 당신의 코드도 좋을 것입니다!

을 사용하여 img태그의 src속성을 변경할 수 없습니다 CSS. 자바 스크립트 onmouseover() 이벤트 핸들러를 사용하여 가능 합니다.

HTML :

<img id="my-img" src="http://dummyimage.com/100x100/000/fff" onmouseover='hover()'/>

자바 스크립트 :

function hover() {
  document.getElementById("my-img").src = "http://dummyimage.com/100x100/eb00eb/fff";
}

css를 사용하여 img src를 변경할 수 없습니다. 그래도 다음과 같은 순수한 CSS 솔루션을 사용할 수 있습니다. HTML :

<div id="asks"></div>

CSS :

#asks {
  width: 100px;
  height: 100px;
  background-image: url('http://dummyimage.com/100x100/0000/fff');
}

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

또는 배경 이미지가있는 div를 사용하지 않으려면 javascript / jQuery 솔루션을 사용할 수 있습니다. HTML :

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

jQuery :

$('#asks')
  .mouseenter(function(){$('#asks').attr('src', 'http://dummyimage.com/100x100/eb00eb/fff');})
  .mouseleave(function(){$('#asks').attr('src', 'http://dummyimage.com/100x100/000/fff');});

이를 위해 아래 코드를 사용할 수 있습니다.

1) HTML

<div id = "aks">

</div>

2) CSS

#aks
    {
        width:100px;
height:100px;    

        background-image:url('http://dummyimage.com/100x100/000/fff');}

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

}

이전 브라우저에서는 요소 :hover에서만 작동했습니다 <a>. 따라서 작동하도록하려면 이와 같은 작업을 수행해야합니다.

<style>
a#aks
{
    width:100px;
    height:100px;
    display:block;
}

a#aks:link
{
  background-image: url('http://dummyimage.com/100x100/000/fff');
}

a#aks:hover
{
  background-image: url('http://dummyimage.com/100x100/eb00eb/fff');
}
</style>

<a href="#" id="aks"></a>

다음 코드는 Chrome과 Firefox에서 모두 작동합니다.

<a href="#"><img src="me-more-smile.jpg" onmouseover="this.src='me-thinking-about-a-date.jpg'" onmouseout="this.src='me-more-smile.jpg'" border="0" alt=""/></a>

여기 순수한 CSS 솔루션이 있습니다. 보이는 이미지를 img 태그에 넣고 두 번째 이미지를 CSS의 배경으로 넣은 다음 마우스 오버시 이미지를 숨 깁니다.

.buttons{
width:90%;
margin-left:5%;
margin-right:5%;
margin-top:2%;
}
.buttons ul{}   
.buttons ul li{
display:inline-block;
width:22%;
margin:1%;
position:relative;
}
.buttons ul li a p{
position:absolute;
top:40%;
text-align:center;
}   
.but1{
background:url('scales.jpg') center no-repeat;
background-size:cover;
}
.but1 a:hover img{
visibility:hidden;
}   
.but2{
background:url('scales.jpg') center no-repeat;
background-size:cover;
}
.but2 a:hover img{
visibility:hidden;
}   
.but3{
background:url('scales.jpg') center no-repeat;
background-size:cover;
}
.but3 a:hover img{
visibility:hidden;
}   
.but4{
background:url('scales.jpg') center no-repeat;
background-size:cover;
}   
.but4 a:hover img{
visibility:hidden;
}           

<div class='buttons'>
<ul>
<li class='but1'><a href='#'><img src='scalesb.jpg' height='300' width='300' alt='' /><p>Blog</p></a></li>
<li class='but2'><a href='#'><img src='scalesb.jpg' height='300' width='300' alt='' /> <p>Herrero</p></a></li>
<li class='but3'><a href='#'><img src='scalesb.jpg' height='300' width='300' alt='' /><p>Loftin</p></a></li>
<li class='but4'><a href='#'><img src='scalesb.jpg' height='300' width='300' alt='' /><p>Contact</p></a></li>
</ul>
</div>

src이미지 를 변경하는 가장 좋은 방법 은 다음과 같습니다.

<img src='willbehidden.png' style="width:0px; height:0px; padding: 8px; background: url(newimage.png);">

라이브 데모보기 : http://www.audenaerde.org/csstricks.html#imagereplacecss

즐겨!

이 코드를 사용해보십시오.

   .card {

            width: 200px;

            height: 195px;

            position: relative;

            display: inline-block;

        }

        .card .img-top {

            display: none;

            position: absolute;

            top: 0;

            left: 0;
           
            z-index: 99;
width:200px;
        }

        .card:hover .img-top {

            display: inline;

        }

 <!DOCTYPE html>

    <html lang="en">

    <head>

    <title>Image Change on Hover with CSS</title>

 
    </head>

    <body>

        <div class="card">

            <img src="http://www.dhresource.com/200x200s/f2-albu-g5-M00-EC-97-rBVaJFkAobCAHD9XAADvz9DDocA266.jpg/diy-wall-stickers-home-decor-nature-colorful.jpg" alt="Card Back" style="width:200px">

            <img src="https://s-media-cache-ak0.pinimg.com/236x/31/17/98/3117987a0be0a7d8976869aabf54d2d7.jpg" class="img-top" alt="Card Front">

        </div>

    </body>

    </html>

HTML과 CSS 만 사용하는 또 다른 간단한 방법이 있습니다!

다음 <img>과 같이 div로 태그를 감싸십시오 .

<div class="image-wrapper">
    <img src="http://dummyimage.com/100x100/000/fff">
</div>

그런 다음 CSS 파일에서 img를 숨기고 래핑 div 요소의 배경 이미지를 설정합니다.

.image-wrapper:hover {
    background-image: url(http://dummyimage.com/100x100/eb00eb/fff);
    background-size: contain;
    background-repeat: no-repeat;
}

.image-wrapper:hover img {
    display: none;
}

Et voilà!