html javascript показать изображение при наведении

Вы можете попробовать скрыть изображение, а затем отобразить его при наведении:

<img src = "foo" style="visibility:hidden" id = "img1" onmouseover = "show()">

<script type = "text/javascript">
function show() {
    document.getElementById('img1').style.visibility = 'visible';
}
</script>

Чтобы снова немного попрактиковаться в моем javascript, я написал решение, которое показывает ваше изображение рядом с курсором при наведении на элемент со специальным классом (я использую class="text-hover-image" в следующем примере):

HTML

<p>Show image when hovering <a class="text-hover-image" href="#">this link</a> </p>
<p>This does work with every element that has <span class="text-hover-image"> a class of <em>"text-hover-image".</em></span>

Связанный Javascript (с использованием Jquery):

$(document).ready(function () {
    var yOff = 15; // Horizontal position of image relative to mousepointer.
    var xOff = -20; // Vertical position of image relative to mousepointer
    var pathToImage = "https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png";

    $(".text-hover-image").hover(function (e) {
        $("body").append("<p id='image-when-hovering-text'><img src='" + pathToImage + "'/></p>");
        $("#image-when-hovering-text")
            .css("position", "absolute")
            .css("top", (e.pageY - yOff) + "px")
            .css("left", (e.pageX + xOff) + "px")
            .fadeIn("fast");
    },

    function () {
        $("#image-when-hovering-text").remove();
    });

    $(".text-hover-image").mousemove(function (e) {
        $("#image-when-hovering-text")
            .css("top", (e.pageY - yOff) + "px")
            .css("left", (e.pageX + xOff) + "px");
    });
});

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

То, что вы показываете, это CSS, а не Javascript.

Что бы я сделал, так это сгенерировал контейнер и 2 div внутри него, один видимый в начале и один скрытый. При наведении на контейнер скройте видимый и покажите другой.

HTML:

<div class="hover_container">
    <div class="text">Show some text here</div>
    <div class="image">
        <img src="image.gif" alt="" />
    </div>
</div>

Исходный CSS:

div.hover_container
{
    width: 300px; /* set a fixed width */
    height: 300px; /* set a fixed height */
}
div.hover_container .text
{
    display: block; /* shown as a block-type element by default, visible */
    width: 300px; /* same width as container */
    height: 300px; /* same height as container */
}
div.hover_container .image
{
    display: none; /* hidden by default */
    width: 300px; /* same width as container */
    height: 300px; /* same height as container */
}
div.hover_container .image img
{
    width: 300px; /* width of the image */
    height: 300px; /* height of the image */
}

Теперь нам нужно скрыть .text и показать .image при наведении курсора на контейнер, поэтому мы добавляем в CSS:

div.hover_container:hover .text
{
    display: none; /* hidden when hovering the container */
}
div.hover_container:hover .image
{
    display: block; /* shown when hovering the container */
}

Обратите внимание, что я не проверял это, но это должно работать. Это не будет анимировано, если вам нужна красивая анимация, попробуйте использовать Javascript. Я не буду говорить об этом, но jQuery может вам в этом помочь.