帮忙给个代码看看！谢谢

chinaboy2005 2008-11-09 02:41:31

页面中鼠标放在文字上，如何实现显示出图片，鼠标离开时就不显示？
高手指点，谢谢！
请个给个代码！

...全文

65 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

-box- 2008-11-09

打赏
举报

学习了！

-box- 2008-11-09

打赏
举报

学习了！

futtit 2008-11-09

打赏
举报

..学习..顶了...

火龙果被占用了 2008-11-09

打赏
举报

使用 CSS 就可以了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=gbk" />

  <title>试试</title>

</head>



<style type="text/css">

#txt {

  font-size: 10pt;

  line-height: 15pt;

}

p {

  text-indent: 2em; 

}



.word {

  color: #0000cd;

  position: relative;

}



.word img {

  display: none;

  border: 1px solid black;

}

.word:hover {

  color: red;

}

.word:hover img {

  display: block;

  position: absolute;

  left: 2em;

  top: 1em;

  border: 2px solid #dcdcdc;

  background-color: yellow;

}

</style>



<body>

  <div id="txt">

  <p>五笔字型计算机汉字输入技术

  <span class="word">Google<img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif"></span>

  计算机汉字输入技术，五笔字型计算机汉字输入技术</p>

  <p>五笔字型计算机汉字输入技术五笔字型计算机汉字输入技术五笔字型计算机汉字输入技术五笔字型计算机汉字输入技

  <span class="word">CSDN<img src="http://www.csdn.net/Images/logo_csdn.gif"></span>

  计算机汉字输入技术，五笔字型计算机汉字输入技术五笔字型计算机汉字输入技术五笔字型计算机汉字输入技术</p>

  </div>

</body>

</html>

wtcsy 2008-11-09

打赏
举报

<style type="text/css">

.f{

cursor:pointer;

position:absolute;

width:357px;

height:194px;

padding:15px 0 0 50px;

background-image:url(http://static5.photo.sina.com.cn/middle/4ef69b3dg5785994300a4&000.jpg)

}

</style>

<script>

var oo = true

function create(){

if(oo==true){

oo=false

var div =document.createElement("div")

div.className="f"

div.id="div"

div.innerHTML="<a href='#'>大法师</a><br>山丘之王<br>血法师<br>怕拉丁"

document.body.appendChild(div)

document.getElementById("div").style.left=document.getElementById("text").offsetLeft+30

document.getElementById("div").style.top=document.getElementById("text").offsetTop

div.onmouseout=del

}}



function del(e){

e=e||event;

var obj=e.relatedTarget||e.toElement;

var div =document.getElementById("div")

if(div.contains(obj))return;

document.body.removeChild(div)

oo=true

}



</script>

<span  id="text" onmouseover="create()" style="cursor:pointer;" onMouseOut="del()" >人族</span><br>

wtcsy 2008-11-09

打赏
举报

<style type="text/css">

.f{

cursor:pointer;

position:absolute;

width:357px;

height:194px;

padding:15px 0 0 50px;

background-image:url(http://static5.photo.sina.com.cn/middle/4ef69b3dg5785994300a4&000.jpg)

}

</style>

<script>

var oo = true

function create(){

if(oo==true){

oo=false

var div =document.createElement("div")

div.className="f"

div.id="div"

div.innerHTML="<a href='#'>大法师</a><br>山丘之王<br>血法师<br>怕拉丁"

document.body.appendChild(div)

document.getElementById("div").style.left=document.getElementById("text").offsetLeft+30

document.getElementById("div").style.top=document.getElementById("text").offsetTop

div.onmouseout=del

}}



function del(e){

e=e||event;

var obj=e.relatedTarget||e.toElement;

var div =document.getElementById("div")

if(div.contains(obj))return;

document.body.removeChild(div)

oo=true

}



</script>

<span  id="text" onmouseover="create()" style="cursor:pointer;" onMouseOut="del()" >人族</span>