在鼠标悬停事件中使用Javascript隐藏内容

Normally I would use CSS to control styles but in this particular case I can't.

通常我会使用CSS来控制样式,但在这种特殊情况下我不能。

I have many onmouseover events on <li> tags as you see in example below.

我在

标签上有许多onmouseover事件,如下面的示例所示。

<li onmouseover="document.getElementById('vid').style.display='none'">1</li>
<li onmouseover="document.getElementById('vid').style.display='none'">2</li>
<li onmouseover="document.getElementById('vid').style.display='none'">3</li>

What I want to do is instead of writing onmouseover="..." for each <li> just have this style event controlled from <script></script> element so that I have less code on the page.

我想要做的不是为每个

编写onmouseover =“...”而只是从

Can this be done? I don't know javascript enough code this <script> ???? </script>

可以这样做吗?我不知道javascript足够代码这个

2 个解决方案

#1

Try this:

$(document).ready(function(){
  $('li:first-child').mouseover(function(){
  	$('#vid').hide();
	});
  
  $('li:last-child').mouseover(function(){
  	$('#vid').show();
	});
});

ul{
  list-style:none;
}

li{
  display: inline-block;
  border: 1px solid;
  padding: 5px;
  cursor: pointer;
}

li:hover{
  border-color: green;
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>Hide content</li>
  <li>Show content</li>
</ul>

<div id="vid">Here is content.</div>

2 个解决方案

#1

更多相关文章

随机推荐