вопрос о переезде - PullRequest
Новая
       2

вопрос о переезде

0 голосов
/ 09 марта 2011

У меня есть ссылка, которая вызывает функцию javascript onmouseover, которая делает div под ним видимым. Теперь все это работает.

Теперь проблема в том, что у меня есть ссылка href, и когда я намыкаю на ее верхнюю часть, она работает отлично, но когда я перемещаю свою мышь поверх «теперь видимого» div, он мигает, потому что html, кажется, думает, что это не так выключите div, а затем снова включите его, чтобы он продолжал выключать и включать его.

Как я мог предотвратить это? (HTML ниже, javascript - это простая функция, которая делает его видимым, нет смысла публиковать, это работает) 

<a style="text-decoration:none;display:block;" onmouseout="ShowStock(1,0);" onmouseover="ShowStock(1,1);" href="">50</a>
<div id="stock1" style="visibility: hidden;">
<a style=" background-color:#009933; text-align:center;" name="1">1</a>
</div>

ВИДЕО ЭТОГО ПРОИСХОДИТ: http://screencast.com/t/qjxHN4wyIc

Ответы [ 2 ]

1 голос
/ 09 марта 2011

Попытайтесь поместить событие onmouseout в элемент внешнего элемента stock точно так же, как в элементе "a", который имеет событие onmousein, и удалите событие onmouseout исходного элемента.

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

1 голос
/ 09 марта 2011

Проблема, продемонстрированная в вашем видео, заключается в том, что div stock1 крадет фокус, который затем запускает onmouseout, закрывая div stock, который затем запускает onmouseover тега A, показывает div stock1, который затем крадет фокус,запускает onmouseout тега A и т. д. *

Самое простое, что можно сделать, это применить тот же метод ShowStock onmouseout / onmouseover к элементу stock1, чтобы он "показывал" себя во время наложения, но скрывалсам по себе, когда не наведен, за исключением того, что при наведении указателя мыши на область внутри тега A, которая показывает его.

Например, это работает идеально (на jsfiddle.net , что также демонстрирует отдельныйверсия с ошибкой, продемонстрированной на видео): 

a.hover {
    background-color: #ccc;
    width: 200px;
    height: 200px;
    position: absolute;
    top: 15px;
    left: 15px;
}
#show1 {
    display: none;
    width: 200px;
    height: 200px;
    position: absolute;
    top: 75px;
    left: 75px;
    background-color: #daa;
}

function showTarget(target, state) {
    switch (state) {
        case 1:
            state = 'block';
        break;
        default:
            state = 'none';
    }
    target = 'show'+target;
    document.getElementById(target).style.display = state;
}

<a class="hover" onmouseover="showTarget(1,1)" onmouseout="showTarget(1,0)">Test</a>
<div id="show1" onmouseover="showTarget(1,1)" onmouseout="showTarget(1,0)">Test Show</div>
...