изменения при наведении курсора мыши, сделать main.jpg

Можно ли внести изменения main.jpg к конкретной IMG при наведении так, что это будет похоже ...изменения при наведении курсора мыши, сделать main.jpg

OnMouseHover # 1 -> changeto. . main1.jpg
OnMouseHover # 2 -> changeto .. main2.jpg
OnMouseHover # 3 -> changeto .. main3.jpg

Это ... как это выглядит. ..

Позвольте мне знать, как я должен решить эту ... спасибо!

источник

2016-11-28 Brian Su

Несомненно, вы можете сделать это легко с помощью css, если используете фоновые изображения – adeneo

@KevinKloet Я ничего не пробовал, задавался вопросом, что будет самым простым решением? –

Я думаю, что это то, что вы хотите [Css change image src on imghover] (http://stackoverflow.com/questions/18032220/css-change-image-src-on-imghover) –

вы должны дать ваш теги классы, как этого

<a class="a-1 main">

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

<style> 
.main { 
    background-image: url('main.png'); 
} 
.a-1:hover { 
    background-image: url('main1.png'); 
} 
.a-2:hover { 
    background-image: url('main2.png'); 
} 
.a-3:hover { 
    background-image: url('main3.png'); 
} 
</style>

EDIT

Если вы должны использовать теги вы можете сделать это только с помощью JavaScript. Я рекомендую использовать фон css.

источник

2016-11-28 07:25:50 iCarnagy

Добавить основной тег изображения, как показано ниже:

<img class="main-img" src="" />

Добавить три ссылки, как показано ниже:

<div class="hover-img-change"> 
    <a data-src='imagepath here'><img src="" /></a> 
    <a data-src='imagepath here'><img src="" /></a> 
    <a data-src='imagepath here'><img src="" /></a> 
</div>

В вышеприведенном коде добавить фоновый путь изображения в данном-Src.

Добавить сценарий:

<script type='text/javascript'> 
$(document).ready(function(){ 
    $(".hover-img-change a").hover(function() { 
      var backgroundImg = $(this).attr("data-src"); 
      $('.main-img').attr("src",backgroundImg); 
    }); 
}); 
</script>

источник

2016-11-28 07:39:38

Попробуйте

<body> 
<a href="#1" rel='img1.jpg' class="imgs">img1</a> 
<a href="#1" rel='review_star.png' class="imgs">img2</a> 
<a href="#1" rel='main1.jpg' class="imgs">img3</a> 

<img src="" width="100px" height="100px" id="main_img"/> 


<script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
<script> 
$("a.imgs").hover(

    function() { 
    var img=$(this).attr('rel'); 
    $('#main_img').attr('src','image/'+img); 
} 
);

источник

2016-11-28 07:40:58 Jon

Вам не нужно JavaScript, чтобы сделать что-то подобное. Вы можете немного изменить свой html, а затем с помощью CSS вы можете изменить изображение. Взгляните сюда.

Demo

<html> 
    <head></head> 
    <body> 
    <div class="row"> 
     <div class="large-3 medium-3 small-12 columns"> 
     <div class="imageContainer"> 
      <span><a href="#"></span> 
     </div> 
     </div> 
     <div class="large-3 medium-3 small-12 columns"> 
     <div class="imageContainer"> 
     <span><a href="#"></a></span> 
     </div> 
     </div> 
     <div class="large-3 medium-3 small-12 columns"> 
     <div class="imageContainer"> 
     <span><a href="#"></a></span> 
     </div> 
     </div> 
    </div> 
    </body> 
</html>

CSS

.row { 
    max-width:75rem; 
    width:100%; 
    margin:0 auto; 
} 
.large-3 { 
    width: 33%; 
    float: left; 
    padding:1px; 
    position:relative; 

} 
span { 
    height:300px; 
    width:300px; 
    display:block; 
    position:relative; 
    background:url(http://65.media.tumblr.com/91c29a3bb3002b5a6fd639982a3792a5/tumblr_inline_nlh60adG3w1svf3j7_500.jpg); 
    background-repeat: no-repeat; 
    background-position: center; 
    -webkit-transition: all 1s; /* Safari */ 
    transition: all 1s; 
} 
.imageContainer { 
    height:300px; 
    width:300px; 
    overflow:hidden; 
} 
span:hover { 
    background:url('http://my-smashing.smashingapps.netdna-cdn.com/wp-content/uploads/2009/12/Slow-Shutter-Photography/slowshutter_11.jpg'); 
    background-position: center; 
    -webkit-transition: all 1s; /* Safari */ 
    transition: all 1s; 
}

Все, что вам нужно сделать, это создать контейнер, а затем дать этот SPAN контейнер Одера фоновое изображение и при наведении курсора мыши с помощью CSS изображение может быть изменен ,

источник

2016-11-28 07:44:30

I _think_ OP хотел изменить src внешнего изображения в фоновом режиме при зависании одного из меньших контейнеров, а не самого маленького контейнера. – Marcus

изменения при наведении курсора мыши, сделать main.jpg

ответ

Смежные вопросы