Question

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

我在onmouseover代码上有很多<li>个事件，如下例所示。

<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>

我想要做的不是为每个onmouseover="..."编写<li>，而是从<script></script>元素控制此样式事件，以便我在页面上拥有更少的代码。

可以这样做吗？我不知道javascript足够的代码<script> ???? </script>

Answer 1

使用jquery：

{{1}}

Answer 2

试试这个：

$(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>

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

2 个答案: