html javascript show hover

Question

html javascript show hover

0

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

Я не смог найти какое-либо хорошее решение на любых веб-сайтах, поэтому надеюсь, что смогу помочь. У меня нет кода для публикации, потому что я не знаю, с чего начать, кроме этого:

<style>
p:hover{
   //Show image code;
}
</style>

user2774713 23 нояб. 2013, в 20:55

Источник

0

Оно скрывает изображение, но затем не отображает его, вот мой код <img src = "media / longhorns.jpg" style = "visibility: hidden" id = "img1" onmouseover = "show ()"> < script type = "text / javascript"> функция show () {document.getElementById ('img1'). style.visibility = visible; } скажи мне, если я сделал что-то не так
user2774713 23 нояб. 2013, в 20:04
0

Моя ошибка, завернутый в кавычки. редактировать мой ответ
imulsion 23 нояб. 2013, в 20:35

Теги:

javascript

html

css

hover

onmouseover

3 ответа

Ещё вопросы

Оно скрывает изображение, но затем не отображает его, вот мой код <img src = "media / longhorns.jpg" style = "visibility: hidden" id = "img1" onmouseover = "show ()"> < script type = "text / javascript"> функция show () {document.getElementById ('img1'). style.visibility = visible; } скажи мне, если я сделал что-то не так
Моя ошибка, завернутый в кавычки. редактировать мой ответ

imulsion · Answer 1 · 2013-11-23T18-18-00.000Z

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

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

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

Я не уверен, почему, но это все еще не работает. Изображение скрыто. Я скопировал ваш код, и он все еще не работает. Вот мой код еще раз. <img src = "media / longhorns.jpg" style = "visibility: hidden" id = "img1" onmouseover = "show ()"> <script type = "text / javascript"> функция show () {document.getElementById ( 'img1'). style.visibility = 'visible'; } </ script> Большое спасибо, если вы можете заставить его работать
@ user2774713 Вы наводите курсор на изображение или текст ? Потому что мой код работает только если вы наводите курсор на изображение. Если вы хотите, чтобы он работал при наведении на текст, просто поместите style.visibility = 'visible' into the атрибут onmouseover` текстового тега

halex · Answer 2 · 2013-11-23T19-34-00.000Z

Чтобы немного попрактиковаться в 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");
    });
});

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

Alejandro Iván · Answer 3 · 2013-11-23T17-08-00.000Z

Вы показываете 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 может помочь вам в этом.

Он не мог работать таким образом, он просто отображал реальный код. Я пытался поместить его в тег скрипта, но это тоже не сработало.
Подождите минуту. Вы знаете, как работают HTML / CSS / Javascript, верно? CSS должен быть включен в теги <style></style> (или связан через теги <link /> из другого файла), Javascript использует теги <script></script> .