onmouseover действует как onclick, а не как наведение

У меня есть таблица «карточек», и я хочу отображать описание в верхней части карточки каждый раз, когда мышь проводится по карточке. Для этого я пытаюсь использовать функции onmouseover и onmouseout.

Мой Javascript:

function showDescription(obj) {
  elem1 = document.getElementById(obj + '_1');
  elem1.style.display = 'none';

  elem2 = document.getElementById(obj + '_2');
  elem2.style.display = 'block';
}

function hideDescription(obj) {
  elem1 = document.getElementById(obj + '_1');
  elem1.style.display = 'block';

  elem2 = document.getElementById(obj + '_2');
  elem2.style.display = 'none';
}

Мой HTML:

<table id='teamTable' align="center">
  <tr>
    <td onmouseover="showDescription('content_1')" onmouseout="hideDescription('content_1')">
      <div id="content_1_1" class="teamTableTitle">
        Name
      </div>
      <div id="content_1_2" class="teamTableDescription">
        Description
      </div>
    </td>
  </tr>
</table>

Ссылка на скрипт

Проблема в том, что два моих события onmouseover и onmouseout действуют так, как если бы они были onclick. Ничего не происходит, мышь проходит по карте, но при нажатии работает ...

Кто-нибудь знает, что я сделал не так? : /


javascript html jquery onmouseover onmouseout
person Nicolas Roy    schedule 28.03.2016    source источник
comment
сделай скрипку, пожалуйста.   -  person Murad Hasan    schedule 28.03.2016
comment
отобразить описание вверху карточки. Вы имеете в виду что-то вроде названия?   -  person brk    schedule 28.03.2016
comment
Пожалуйста, используйте addEventListeners. Кстати, не мог подробно понять ваш вопрос   -  person Gopinath Shiva    schedule 28.03.2016
comment
Он отлично работает для меня. В каком браузере вы тестируете?   -  person avck    schedule 28.03.2016
comment
Вопрос в том, что когда у меня есть это: ‹div onmouseover = alert ('Hello')› Это тест. ‹/Div›, мне нужно щелкнуть, чтобы отобразить предупреждение. Он не появляется при наведении курсора мыши.   -  person Nicolas Roy    schedule 28.03.2016
comment
Пользуюсь Safari. Но вы правы, я только что проверил, и он работает в Firefox ...   -  person Nicolas Roy    schedule 28.03.2016
comment
Проверьте это: jsfiddle.net/4mbjx7q4   -  person avck    schedule 28.03.2016
comment
Попробуйте использовать соответствующий тег, например, здесь находится сценарий ‹head› здесь ‹/head› ‹body› html ‹/body›. Браузеры различают.   -  person avck    schedule 28.03.2016

Ответы (2)


arrow_upward
0
arrow_downward

Основывайтесь на моем понимании вашего кода. Я придумал это и преобразовал в jQuery

HTML

<table id='teamTable' align="center">
     <tr>
        <td id="content_1">
            <div id="content_1_1" class="teamTableTitle">
                 Name (Hover me to show description)
            </div>
            <div id="content_1_2" class="teamTableDescription">
                 Description
            </div>
        </td>
     </tr>
</table>

JS (jQuery)

$('#content_1').hover(function(){
    $(this).find('div').eq(0).hide().next('div').show();
},function(){
    $(this).find('div').eq(0).show().next('div').hide();
});

Нажмите здесь, чтобы работать с JSFiddle

person rmondesilva    schedule 28.03.2016

arrow_upward
0
arrow_downward

Вот решение вашей проблемы без использования jQuery:

HTML

<table id='teamTable' align="center">
  <tr>
    <td class="td-test">
      <div id="content_1_1" class="teamTableTitle">
        Name
      </div>
      <div id="content_1_2" class="teamTableDescription">
        Description
      </div>
    </td>
  </tr>
</table>

Javascript

var tableEl = document.getElementsByClassName('td-test');

tableEl[0].addEventListener("mouseover", showDescription, false);
tableEl[0].addEventListener("mouseout", hideDescription, false);

function showDescription() {
  var el1 = this.querySelector("#content_1_1");
  var el2 = this.querySelector("#content_1_2");

  el1.style.display = "none";
  el2.style.display = "block";
}

function hideDescription() {
  var el1 = this.querySelector("#content_1_1");
  var el2 = this.querySelector("#content_1_2");

  el1.style.display = 'block';
  el2.style.display = 'none';
}
person aphextwix    schedule 28.03.2016