Hover Over Text, Image Fades In

Question

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

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

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

Answer 1

CSS, может сделать анимацию, вянет, трансформирует на нем и т.д. .... #### EDIT добавил выцветанию в

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

Answer 2

$('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="http://i.stack.imgur.com/TODEi.png" style='display:none;'>

Answer 3

Достаточно просто: a hover и display: 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

Answer 4

сделать изображение ребенка элемент тега, в противном случае вы не можете навести с помощью 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') 
}); 

сотовый остаются теми же, за исключением

a:hover image{ 
    opacity:1; 
} 

вы делаете:

.opacity{ 
    opacity:1; 
} 

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