Наведите курсор на текст, изображение исчезнет

Я только начинаю изучать Javascript и Jquery, но у меня было много проблем в последнее время. Я нашел похожие темы, но ничего, что я ищу.

По сути, я хочу навести указатель мыши на текстовую ссылку, чтобы изображение появилось в другом месте страницы. Я не уверен, что это можно сделать с помощью CSS, потому что, к сожалению, я не знаком с новыми кодами CSS.

Любая помощь будет принята с благодарностью!

4 ответа

Решение

Только css, может делать анимацию, исчезать, трансформироваться и т. д.

img{opacity:0;}
a:hover +img{-webkit-animation:changeOpacity 5s;animation:changeOpacity 5s;}
@-webkit-keyframes changeOpacity {
    0%   {opacity:0;}    
    100% {opacity:1;}
 }

/* Standard syntax */
@keyframes changeOpacity {
  0%   {opacity:0;}    
    100% {opacity:1;}
 }
<a href="http://lorempixel.com/300/300/sports/1">Hover the see Full image,click to go there</a>
<img src="http://lorempixel.com/300/300/sports/1" width="200" height="200" />
<br>
<a href="http://lorempixel.com/300/300/sports/1">Hover the see Full image,click to go there</a>
<img src="http://lorempixel.com/300/300/sports/1" width="200" height="200" />

$('a#hoverme').hover(function(){
    $( "#book" ).fadeIn( "slow", function() {
        console.log('done!');
      });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href='#' id='hoverme'>link</a>
<br>
<img id="book" src="https://stackru.com/images/0c2f251613473d5982be78bf8fb12ae30c1a8097.png" style='display:none;'>

Все очень просто с помощью:hover и отображения: none / block.

CSS:

    .hover_img a { 
         position: relative; 
    }

    .hover_img a span { 
         position: absolute; 
         display: none; 

    }

    .hover_img a:hover span { 
         display: block; 
    }

HTML:

<div class="hover_img">
     <a href="#">Show Image<span><img src="http://lorempixel.com/output/animals-q-c-640-480-3.jpg" /></span></a>
</div>

http://codepen.io/anon/pen/QwObyo

Сделайте изображение дочерним элементом тега a, иначе вы не можете парить с помощью css. чем установить положение на изображении, как вы хотите.

img{
    position: absolute;
    opacity:0;
    transition: opacity 0.5s ease-in-out;
}
a:hover image{
    opacity:1;
}

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

$('a').mouseenter(function(){
    $('img').addClass('opacity')
});
$('a').mouseleave(function(){
    $('img').removeClass('opacity')
});

CSS должен оставаться прежним, за исключением

 a:hover image{
    opacity:1;
}

ты делаешь:

.opacity{
    opacity:1;
}

привет тимофей

Другие вопросы по тегам