我onmouseout在绝对positoned div 中遇到了这个函数的问题.当鼠标命中div中的子元素时,mouseout事件会触发,但我不希望它触发,直到鼠标超出父,绝对div.
如何mouseout在遇到没有jquery的子元素时阻止事件触发.
我知道这与事件冒泡有关,但我没有找到如何解决这个问题的运气.
我在这里找到了类似的帖子:如何禁用子元素触发的mouseout事件？
但是该解决方案使用jQuery.
我希望使用纯CSS和Javascript来实现这一目标.我也熟悉PHP.我正在避免使用jquery,因为我正在尝试更多地学习javascript而且我发现在某些word-press网站中,jquery并不总是按照我需要的方式工作.据我所知,我没有做任何程序错误,但我必须遗漏一些东西,因为它似乎没有正常工作.首先,我将给出一个可以找到代码的链接.http://jsfiddle.net/FFCFy/13/
接下来我将给出实际的代码.
setInterval(function() {
var x = document.getElementById("div1");
var y = document.getElementById("div2");
function stext() {
x.style.color = 'red';
y.style.color = 'black';
}
function htext() {
x.style.color = 'black';
y.style.color = 'red';
}
}, 250);
<html>
<body>
<span id="div1" style="color:black;" onmouseover="stext" onmouseout="htext">TEXT1</span><p />
<hr color="black" />
<span id="div2" style="color:red;"onmouseover="htext" onmouseout="stext">Text2</span>
</body>
</html>
最终我将修改它以隐藏和显示不同的文本,但是一旦我弄明白,我就会明白这一点.
function EvalSound(soundobj) {
var thissound=document.getElementById(soundobj);
thissound.currentTime = 0;
thissound.Play();
}
function StopSound(soundobj) {
var thissound=document.getElementById(soundobj);
thissound.Stop();
}
这是我播放音频文件的代码,
onmouseover="EvalSound('sound1')" onmouseout="StopSound('sound1')"
它目前正在进行悬停,但是当我回到它下面播放的图像时它不会回到开头,它会继续播放
我正在写两个文件 - 一个是html,一个是JavaScript.所以要调用我做的对象
document.getElementById("nameObj").onmouseover = changeMe;
在我做的JavaScript文件中
changeMe = function()
{
//and here i write the function
}
但现在我正在尝试优化我的代码并调用一个包含对象的函数.我创建了部分(其中4个),我正在尝试用onmouseover和更改颜色onmouseout.这是html的代码:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"> </script>
<title> test 2</title>
</head>
<body>
<header> </header>
<div id="wrapper">
<main>
<section class="mysection" id="section1"> </section>
<section class="mysection" id="section2"> </section>
<section class="mysection" id="section3"> </section>
<section class="mysection" id="section4"> </section>
</main>
<div class="clear"> </div>
</div>
<footer> </footer>
<script>
(function(){
var sec = document.getElementsByClassName("mysection");
for(var i=0; i<3; i++)
{
sec[i].onmouseover=changeMe(sec[i], i);
sec[i].onmouseout=changeBack(sec[i]); …我有一个问题:
这是我的HTML的一部分:
<div id="div_1">
Here Hover
</div>
<div id="div_2">
Here content to show
</div>
这是我的jQuery脚本的一部分:
jQuery('#div_2').hide();
jQuery('#div_1').onmouseover(function() {
jQuery('#div_2').fadeIn();
}).onmouseout(function(){
jQuery('#div_2').fadeOut();
});
问题:
如果我将鼠标悬停在div_1上,则显示div_2,如果我将鼠标悬停,则div_2将被隐藏,但是:
如果我首先将鼠标悬停在div_1上,然后检查div_2,则会快速隐藏div_2.
我用jQuery.addClass()尝试过这个.在div_1中鼠标输出后,但没有任何变化.
我不想在第一个div中制作第二个div ...是否有另一种方式使用jQuery？
Thx Ahmet
如何hover在JSX中更改图像
我正在尝试这样的事情:
<img src={require('../../../common/assets/network-inactive.png')}
onMouseOver={this.src = require('../../../common/assets/network.png')}
onMouseOut={this.src = require('../../../common/assets/network-inactive.png')} />
这应该非常简单:
<input type="button" name="test" id="test" value="roll over me" onmouseover="this.disabled=true;" onmouseout="this.disabled=false;">
如果我将鼠标光标放在此按钮上,它将被禁用..祝你好!但是现在当我将光标移出时,它没有启用...嘘.
我理解禁用它的概念意味着你不能用它做任何事情.但是如何通过鼠标启用它？可能吗？我错过了什么吗？
我希望有一个表在鼠标移动时自行更改,并在鼠标移出时更改回原始状态.这是我能做的最好的事情:
<html>
<body>
<div id="line1">
<table onmouseover="showMore()" border="1">
<tr>
<td>this is sick</td>
</tr>
</table>
</div>
<script>
function showMore(){
document.getElementById("line1").innerHTML = "<table border='1' onmouseout='showLess()'><tr><td>this is awesome</td></tr></table>";
}
function showLess(){
document.getElementById("line1").innerHTML = "<table border='1' onmouseover='showMore()'><tr><td>this is sick</td></tr></table>";
}
</script>
</body>
</html>
但是,有时当我将鼠标移出时,静止内部的内容不会变回原始内容.有一个更好的方法吗？
谢谢!
我使用for循环创建了4个rect。如果将鼠标悬停在任何这些rect上，将在旁边显示rect。但是问题在于，新显示的矩形不会在鼠标移开时隐藏。我的代码有什么问题？
window.onload = function() {
var paper = Raphael(0, 0, 640, 540);
function aa(h1,h2){
var showbox = paper.rect(h1+300,h2,100,100);
}
function ab(){
showbox.hide();
}
for (i = 0; i < 2; i++) {
for (j = 0; j < 2; j++) {
(function(i, j) {
var boxes = paper.rect(0 + (j * 100), 0 + (i * 100), 100, 100).attr({
fill: '#303030',
stroke: 'white'
});
boxes.node.onmouseover = function() {
var h1 = boxes.getBBox().x;
var h2 = boxes.getBBox().y;
aa(h1,h2);
};
boxes.node.onmouseout …我刚刚开始与反应电镀。我目前正在使用material-ui进行我的navBar并做出反应。当我将鼠标悬停在菜单上时，将显示下拉菜单。但是为了关闭下拉菜单，我必须单击下拉菜单的外部。我希望能够在将鼠标悬停在下拉菜单之外或移至其他菜单选项（在这种情况下，应显示另一个下拉菜单）时关闭该下拉菜单。像这样的东西：https : //www.palantir.com/
我环顾四周，但找不到解决方案。这是我最近得到的：Material-ui：通过事件悬停打开菜单
我尝试使用相同的技术，并将其添加到我的代码中，但无济于事。有什么建议么？谢谢！
编辑：我在这里重新创建了我的问题：https : //react-xmaiyw.stackblitz.io 单击“为什么我们”时可以看到问题。
handleClick = (event) => {
event.preventDefault();
this.setState({
open: true,
anchorEl: event.currentTarget,
});
};
handleRequestClose = () => {
this.setState({
open: false,
});
};
render() {
return (
<FlatButton
onClick={this.handleClick}
onMouseOver={this.handleClick}
onMouseLeave={this.handleRequestClose} //When I add this line of
//code, it keeps flickering very fast almost as if drop-down
//doesn't open
label="Why Us?"
/>
)}
你可以在标题中看到它是什么。我有四个“div”，其中每个 ap 标签。当我将鼠标放在第一个 div 上时，更改第一个 div 的 p 标签的“不透明度”。问题是当我继续将鼠标放在第二个或第三个“div”上时，只会更改第一个“div”中的标签“p”。它应该更改自己的“p”标签。重要的是，我不能使用CSS“：hover”。问题很清楚，那就是所有人都有相同的“id”。我需要一个 javascript，它不会单独枚举所有不同的类。
我对我的英语感到抱歉。我希望你能理解我。我的脚本：
<div onmouseout="normal();" onmouseover="hover();" >
<p id="something">LOLOL</p>
</div>
<div onmouseout="normal();" onmouseover="hover();" >
<p id="something">LOLOL</p>
</div>
<div onmouseout="normal();" onmouseover="hover();" >
<p id="something">LOLOL</p>
</div>
<div onmouseout="normal();" onmouseover="hover();" >
<p id="something">LOLOL</p>
</div>
JavaScript：
function normal() {
var something = document.getElementById('something');
something.style.opacity = "0.5";
}
function hover() {
var something = document.getElementById('something');
something.style.opacity = "1";
CSS：
p {
opacity: 0.5;
color: red;
}
我正在使用javascript/jQuery编写一个页面,差不多完成了.当相关按钮悬停时,我应该有旋转内容(函数'rotatecontent')和显示在旋转内容位置的div.我完成了所有这些,除非我将鼠标悬停在一个按钮上,所有div内容都会消失,并且原始的rotatecontent函数不会恢复.我需要实现一个功能,一旦用户将鼠标悬停在按钮上,就可以恢复它.这是我的JS:
<script type="text/javascript">
var messages;
var curcontentindex = 0;
var prevcontentindex;
var futcontentindex;
var i;
function rotatecontent() {
messages.hide();
curcontentindex = (curcontentindex < messages.length - 1) ? curcontentindex + 1 : 0;
messages.get(curcontentindex).style.display = "block";
}
$(function() {
messages = $('.dyncontent').find('div');
i = setInterval(rotatecontent, 1000);
$('li').hover(
function () {
$(this).addClass("hover");
clearInterval(i); // when mouse is over object
},
function () {
$(this).removeClass("hover");
setInterval(rotatecontent, 1000); //when mouse is no longer over object
}
);
});
</script>
这是我的HTML:
<div class="dyncontent">
<div id="div1">Be …onmouseout ×12
onmouseover ×11
javascript ×9
html ×4
css ×3
jquery ×2
reactjs ×2
audio ×1
dom-events ×1
function ×1
hover ×1
jsx ×1
material-ui ×1
onhover ×1
raphael ×1