CSS: изменить изображение src на img: hover

мне нужно изменить <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.

1004   18  

18 ответов:

только с html и css, его не возможно изменить src изображения. Если вы замените тег img на тег div, то вы можете изменить изображение, установленное в качестве фона, как

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

и если вы думаете, что можете использовать некоторый код javascript, то вы должны быть в состоянии изменить src тега img, как показано ниже

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);" />
118  
2018-03-26 10:54:42

Я изменил несколько изменений, связанных с Патриком Костенсом.

<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>

DEMO

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

84  
2016-09-09 17:56:45

что вы могли бы сделать, это немного обмануть, установив width и height до 0, чтобы скрыть фактическое изображение и применить некоторые CSS, чтобы сделать то, что вы хотите:

#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 тег размер, который вы хотите, чтобы он имел (половина размера вашего фактического изображения).

Скрипка

14  
2013-08-03 14:37:48

у меня была аналогичная проблема, но мое решение состояло в том, чтобы иметь два изображения, одно скрытое (display:none) и одно видимое. При наведении указателя мыши на окружающий промежуток исходное изображение изменяется на display:none и другое изображение для отображения: block. (Может использовать 'inline' вместо этого в зависимости от ваших обстоятельств)

в этом примере вместо изображений используются два тега 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>
13  
2015-01-13 00:04:09

вот альтернативный подход с использованием чистого 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/

обратите внимание, что используемые изображения имеют одинаковые размеры для правильного отображения. Кроме того, эти размеры файлов изображений довольно малы, поэтому загрузка нескольких в этом случае это не проблема, но может быть, если вы хотите переключить отображение изображений большого размера.

5  
2016-05-27 17:13:09

так как вы не можете изменить src С помощью CSS: если 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 (сокращение от атрибута), чтобы изменить

3  
2013-08-03 14:22:29

у меня есть еще одно решение. Если кто-нибудь использует 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>

Javascript:

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

нет CSS ^^.

3  
2013-08-03 15:43:37

Скрипка

согласен с ответом Ашискумара,
существует способ изменить url-адрес изображения при наведении мыши с помощью функции jQuery, как показано ниже:

$(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
    });
 });
3  
2017-11-13 11:59:00

у меня была аналогичная проблема - я хочу заменить изображение на :hover, но не могу использовать BACKGRUND-IMAGE из-за отсутствия адаптивного дизайна Bootstrap.

Если вы хотите, чтобы я только хотел изменить изображение на: 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-совместимый код вы можете Скрыть /показать: наведите изображение путем позиционирования не по непрозрачность.

2  
2013-12-04 09:51:22

лично я бы пошел с одним из решений JavaScript / jQuery. Это не только сохраняет вашу семантику HTML (т. е. изображение отображается как элемент img с его обычным изображением src, определенным в разметке), но если вы используете решение JS / jQuery, вы также сможете использовать JS / jQuery для предварительная загрузка ваше изображение при наведении.

предварительная загрузка изображения наведения будет означать, что, скорее всего, не будет задержки загрузки, когда пользователь наводит курсор на исходное изображение, в результате чего на вашем сайте ведут себя гораздо более профессионально.

Это означает, что у вас есть зависимость от JS, но крошечное меньшинство, у которого нет JS, вероятно, не будет слишком суетиться - и все остальные получат лучший опыт... и ваш код тоже будет хорош!

2  
2014-03-07 15:38:59

вы не можете изменить img тега src атрибут с помощью CSS. Возможно использование Javascriptonmouseover() обработчик событий.

HTML:

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

Javascript:

function hover() {
  document.getElementById("my-img").src = "http://dummyimage.com/100x100/eb00eb/fff";
}
1  
2013-08-03 14:23:10

вы не можете изменить img src с помощью css. Однако вы можете использовать следующее чистое решение 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  
2013-08-03 14:24:00

для этого вы можете использовать ниже код

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');

}
1  
2013-08-03 14:26:13

на старых браузерах, :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>
1  
2014-01-08 03:25:51

следующий код работает как в 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>
1  
2015-04-23 09:06:39

вот чистое решение 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>
0  
2014-10-29 02:07:05

лучший способ изменить src для изображения:

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

смотрите демо:http://www.audenaerde.org/csstricks.html#imagereplacecss

наслаждайтесь!

0  
2014-12-16 16:21:57

Попробуйте Этот Код.

   .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>
0  
2017-06-05 16:03:29

Comments

    Ничего не найдено.
Click here to cancel reply.