Затухание в объекте при зависании над другим

Я хотел бы сдвинуть элемент всплывающей подсказки при зависании на другом элементе.Затухание в объекте при зависании над другим

Я пробовал использовать jQuery, но я чувствую, что ничего не исчезнет, если я hover на countbox1. countbox1 - это таймер, созданный с помощью javascript.

Я не думаю, что сценарий ошибочен. Я думаю, что он не обнаруживает jQuery по какой-то причине.

Я также попытался загрузить jQuery и поместить его прямо в "src:".

$(document).ready(function(){ 
 
    $("#countbox1").onmouseover(function(){ 
 
    $("#tooltip").fadeIn(); 
 
    }); 
 
    $("#countbox1").onmouseout(function(){ 
 
    $("#tooltip").fadeOut(); 
 
    }); 
 
});

#countbox1 { 
 
    width: 400px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    text-align: center; 
 
    font-family: bebas; 
 
    font-size: 70px; 
 
    color: white; 
 
    cursor: default; 
 
} 
 

 
#tooltip { 
 
    width: 500px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    color: white; 
 
    font-family: mix_thin; 
 
    font-size: 18px; 
 
    text-align: center; 
 
    margin-bottom: -5px; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<div id="home"> 
 
    <p id="tooltip">Wochen:Tage:Stunden:Minuten:Sekunden</p> 
 
    <div id="countbox1"></div> 
 
    <hr style="width: 500px;"> 
 
</div>

источник

2015-07-15 Emonadeo

это '' mouseover' не onmouseover' таким же образом, '' mouseout' не onmouseout' –

@Arun это правильно, но если вы не У меня есть конкретные потребности, я бы предложил использовать анимацию CSS вместо этого, я сделаю для вас небольшую скрипту –

http://jsfiddle.net/arunpjohny/pcuc9aph/1/ –

Если все, что вы хотите, это подсказка, чтобы войти в экран на парении чего-то еще, я предложил бы использовать CSS transition.

Если вы вложили <p id="tooltip"> в пределах #countbox1 и положили :hover -event на это, вы можете получить именно то, что хотите.

HTML

<div id=home> 
    <div id="countbox1"> 
     <p id="tooltip">Wochen:Tage:Stunden:Minuten:Sekunden</p> 
    </div> 
    <hr style="width: 500px;"> 
</div>

CSS

#home { 
    height: 50%; 
    background: red; 
} 

#countbox1 { 
    width: 400px; 
    margin-left: auto; 
    margin-right: auto; 
    text-align: center; 
    font-family: bebas; 
    font-size: 70px; 
    color: white; 
    cursor: default; 
    height: 50px; 
    background: #f4f4f4; 
} 

#countbox1:hover #tooltip { 
    opacity: 1; 

} 

#tooltip { 
    width: 500px; 
    color: white; 
    font-family: mix_thin; 
    font-size: 18px; 
    text-align: center; 
    height: 30px; 
    background: #0000ff; 
    position: absolute; 
    left: 50%; 
    margin-left: -250px; 
    top: -15px; 
    opacity: 0; 
    transition: all 1s; 
}

Here's a working demo. Наведите указатель мыши на серой области, чтобы всплывающая подсказка появилась в представлении.

Here's a working demo, где всплывающая подсказка входит в экран сверху.

источник

2015-07-15 12:35:41 Rvervuurt

Конечно, для этого требуется, чтобы html редактировался ... –

Который я упоминаю в начале с 'если вы гнездо ...' – Rvervuurt

-1

Вы должны использовать mouseover вместо onmouseover:

$(document).ready(function(){ 
 
    $("#home").mouseover(function(){ 
 
    $("#tooltip").fadeIn(); 
 
    }); 
 
    $("#home").mouseout(function(){ 
 
    $("#tooltip").fadeOut(); 
 
    }); 
 
});

#countbox1 { 
 
    width: 400px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    text-align: center; 
 
    font-family: bebas; 
 
    font-size: 70px; 
 
    color: white; 
 
    cursor: default; 
 
} 
 

 
#tooltip { 
 
    width: 500px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    color: white; 
 
    font-family: mix_thin; 
 
    font-size: 18px; 
 
    text-align: center; 
 
    margin-bottom: -5px; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<body> 
 
    <div id=home> 
 
    <p id="tooltip">Wochen:Tage:Stunden:Minuten:Sekunden</p><div id="countbox1"></div> 
 
    <hr style="width: 500px;"> 
 
    </div> 
 
</body>

Проверьте это и на этом JSFiddle.

источник

2015-07-15 12:38:47

Возможно, вы используете устаревшие методы.

Замените код на картинке ниже, и попробуйте еще раз:

$(document).on('ready',function(){ 
    $("#countbox1").on('mouseover',function(){ 
     $("#tooltip").stop(true).fadeIn(); 
    }); 
    $("#countbox1").on('mouseout',function(){ 
     $("#tooltip").stop(true).fadeOut(); 
    }); 
});

источник

2015-07-15 13:44:34 tin

Затухание в объекте при зависании над другим

ответ

Смежные вопросы