Вывод изображения при наведении курсора мыши на текст

#javascript #html #css

#javascript #HTML #css

Вопрос:

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

Идея заключается в следующем: при наведении курсора мыши на слово «Google» логотип Google должен отображаться в красном поле, при наведении курсора мыши на слово «OneNote» логотип OneNote должен отображаться в красном поле. Шаг 1

Я попытался сделать это, следуя этой логической :

 <!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
    </head>
    <body>
        <img id="img1" onmouseover="setImg()" onmouseout="unSetImg()" src="https://i1.wp.com/www.grapheine.com/wp-content/uploads/2015/09/nouveau-logo-google.gif?fit=1950,1200amp;quality=90amp;strip=allamp;ssl=1" width="300">
    </body>
    <script type="text/javascript">
        function setImg(){
            document.getElementById("img1").src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSU48ifXX9Kar3IFVrlfwx6UFLqaQno8rCebFvGtwk6yWky9_mz";
        }

        function unSetImg(){
            document.getElementById("img1").src="https://i1.wp.com/www.grapheine.com/wp-content/uploads/2015/09/nouveau-logo-google.gif?fit=1950,1200amp;quality=90amp;strip=allamp;ssl=1";
        }
    </script>
</html>

Тогда это работает, но только когда мы заменяем изображение другим изображением, но если я адаптирую свой код, заменяющий изображение google текстом, это не сработает!

Может кто-нибудь сказать мне, что использовать, потому что я не нашел ничего, что соответствовало бы тому, что я хочу!

Спасибо

Лукас

1. Можно ли вместо этого использовать CSS? Вы должны быть в состоянии сделать это без JS, в зависимости от структуры и цели.

2. «но если я заменю изображение текстом, это не сработает» -> что вы имеете в виду под этим? какое изображение вы заменяете текстом?

3. @KrishnaPrashatt хороший вопрос .

4. Ваш HTML неверен. Исправьте это в первую очередь.

5. Да, извините, я изменил это предложение. Я имею в виду, я пытался заменить логотип Google текстом, и это не сработало, текст не меняется на логотип onenote!

Ответ №1:

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

 var elems = document.querySelectorAll("#thing li");
var logo = document.querySelector("#thing .logo");
elems.forEach(function(elem) {
  elem.addEventListener("mouseover", function() {
    logo.src = elem.getAttribute("data-logo");
  });
  elem.addEventListener("mouseout", function() {
    logo.src = "";
  });
});

 img.logo {
  border: 2px dotted red;
  height: 50px;
  min-height: 50px;
  min-width: 50px;
}

 <div id="thing">
  <img class="logo" />
  <ul>
    <li data-logo="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png">Google</li>
    <li data-logo="https://learn.microsoft.com/en-us/graph/images/onenotelogobgs.png">OneNote</li>
  </ul>
</div>

Ответ №2:

 .hovercontainer {
            width: 500px;
            margin: 0 auto;
            position: relative;
            height: 170px;
        }
                  .hovercontainer p{
                    position:absolute;
                    top:50%;
                    text-align: center;
                    left:0;
                    right:0;
                    margin:0 auto;  
                    z-index:10;
                  }
        			.hovercontainer img{
        				width:90%;
        				-webkit-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
        opacity:0;
                  position: relative;}
        .hovercontainer p:hover ~ img{
        	opacity:1
        }
                  .hovercontainer p:hover{
                    opacity:0;
                  }

     <div class="hovercontainer">
                    <p>Text</p>
                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSU48ifXX9Kar3IFVrlfwx6UFLqaQno8rCebFvGtwk6yWky9_mz" alt="" />
                    </div>