Question

我正在寻找一个我在互联网上找不到的重要代码。

我创建了一个css框格式

.box {
float: left;
width: 740px;
height: 300px;
margin-left: 10px;
margin-top: 10px;
padding: 5px;
border: 2px solid black;

和HTML

但我不知道如何激活onmouseover事件，以便在鼠标悬停在其上时隐藏所有文本并显示新的文本内容。

谢谢

Answer 1

我想你想做的是这样的事情：

HTML：

<div class="box">
    <div class="a">AAA AAA ... </div>
    <div class="b">BBB BBB ... </div>
</div>

CSS：

.box {
  float: left;
  width: 740px;
  height: 300px;
  margin-left: 10px;
  margin-top: 10px;
  padding: 5px;
  border: 2px solid black;
  background-color:#C8C8C8;
}
.box:hover{
   background-color:#C8C8FF;
}
.box div.b{
  display:none;
}
.box:hover div.a{
  display: none;
}
.box:hover div.b{
  display: block;
}

DEMO：http://jsfiddle.net/YJ7an/1/

希望这有帮助。

Answer 2

不要说互联网上没有资源，实际上有足够的网站可用于onmouseover活动。推荐的最佳方式是W3Schools

进入你的问题，有几种方法可以触发onmouseover事件，在这里我使用简单的javascript来改变触发onmouseover事件的文本。

<!DOCTYPE html>
<head>
<title>a
</title>
 <script type="text/javascript">
    function changeMeHere(text)
        {
            var display = document.getElementById('text-to-display');
            display.innerHTML = "";
            display.innerHTML = text;
        }
 </script>
<style>
#box {
float: left;
width: 300px;
height: 300px;
margin-left: 10px;
margin-top: 10px;
padding: 5px;
border: 2px solid black;
}
</style>
</head>
<html>
<body>
<div id="box" onmouseover="changeMeHere('Yes, this is Onmouseover Text')" >
<div id="text-to-display" >
default text here.
</div>
</div>
</body>
</html>

如何激活整个文本的onmouseover事件

2 个答案: