Возникают проблемы с исчезновением изображения при использовании события onmouseover для кнопки

0

Проблема исправлена, информация не требуется.

  • 0
    FYI идентификаторы должны быть уникальными, так как два элемента не должны иметь одинаковый идентификатор.
  • 0
    можете ли вы создать вместо этого plnkr / jsfiddle, чтобы воспроизвести вашу проблему.
Теги:

5 ответов

1
Лучший ответ

Вот простой пример использования JQuery:

https://jsfiddle.net/ztuf96dg/4/

$(document).ready(function() {
  $('li').hover(function(e) {
      var imageID = $(e.currentTarget).attr('data-img-id');
      var $image = $('img[data-img-id="' + imageID + '"]');
      $image.show();
    },
    function(e) {
      var imageID = $(e.currentTarget).attr('data-img-id');
      var $image = $('img[data-img-id="' + imageID + '"]');
      $image.hide();
    });
});
Поделиться
  • 0
    Спасибо, это имеет больше смысла! Но я хочу, чтобы это происходило наоборот, так как при запуске невидимые и при наведении мыши становятся видимыми.
1

Попробуйте сделать это с помощью одной функции для мыши и одной для мыши. Также используйте свойство видимости img вместо отображения, чтобы предотвратить прыжки элементов.

See it here:
https://plnkr.co/edit/YeOgtFeEmNhRCgdQ0Mlp?p=preview

РЕДАКТИРОВАТЬ

Итак, дело в следующем:

  function sfuncOver(imgId) {
    var x = document.getElementById(imgId);
    if (x.style.visibility === 'hidden') {
        x.style.visibility = 'visible';
    } else {
        x.style.visibility = 'hidden';
    }
  }

  function sfuncOut(imgId) {
    var x = document.getElementById(imgId);
    x.style.visibility = 'visible';
  }

... в js и в html:

 <td id="tab1" onmouseover="sfuncOver('imgSWTCH1')" onmouseout="sfuncOut('imgSWTCH1')">C</td>

...и так далее. НО делать это с jQuery будет на 10 тысяч лучше :) Это стиль кодирования 90-х годов :)

Поделиться
0 

var change=function(){
    if(document.getElementById("image").style.visibility == "visible"){
        document.getElementById("image").style.visibility = "hidden";}else{document.getElementById("image").style.visibility="visible";}
    }
function enter(){
    document.getElementById("image").style.visibility = "hidden";
    }
function leave(){
    document.getElementById("image").style.visibility="visible";
    }
<!DOCTYPE html>
<html>
<head>
	<link rel='stylesheet' href='style.css'/>
	<script src='script.js'></script>
</head>
<body>
<img onmouseover="enter();" onmouseout="leave();" id="image" src="https://publicdomainvectors.org/photos/Microscope-BW.png"/>
<button onclick="change();" >ClicMe</button>
</body>
</html>

Запустите код snnipet Надеюсь, он это сделает... Удачи

Поделиться
0

У вас есть 7 функций, выполняющих то же самое. Лучшим подходом может быть создание одной функции и привязка того элемента, который вы хотите скрыть. Вот скрипка с примером: https://jsfiddle.net/83drj2rs/1/

Вот соответствующий JavaScript:

function toggleVisibility(element){
    if(element.style.display === "none") {
    element.style.display = "inline-block";
  } else {
    element.style.display = "none";
  }
}

Array.prototype.slice.call(document.getElementsByClassName('tab')).forEach(function(element){
    element.onmouseover = toggleVisibility.bind(this, document.getElementById(element.getAttribute('data-hide')));
});

Также обратите внимание, что я удалил все свои атрибуты onmouseover на самих элементах html и вместо этого заменил их атрибутом data-hide. Это говорит о функции, которую элемент скрывает при событии mouseover.

Поделиться
0

Попробуйте что-то вроде этого:

HMTL:

<table >
              <tb id="tab1">C</tb> //make sure id is unique for each <tb>
              <br />
                (...)
          </table>

Javascript:
(*) убедитесь, что вы завершаете javascript на документе.

$(function() {
  $('#imgSWTCH1').hide();  
  $('#tab1').mouseover(function (e) {
     //e.stopPropagation();
      $('#imgSWTCH1').show();      
  });
  $('#tab1').mouseout(function (e) {
    //e.stopPropagation();
      $('#imgSWTCH1').hide();      
});

});

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню