Question

在我的页面上，我有一个名为＆＃34; okno1＆＃34;在其中有一些文本和鼠标悬停时，在cca 5秒文本返回后，会出现一张图片而不是该文本。问题是，整个盒子＆＃34; okno1＆＃34;应该是另一个页面的链接，在firefox中工作。我试过它：

<a href=".." target="_blank"> 
    <okno1 id="okno1" onMouseOver="zobraz1();"> ...  </okno1>
</a>

之后我尝试了js：

<okno1  id="okno1" onclick="nahrejodkaz('....');" onMouseOver="zobraz1();"> .... </okno1>

function nahrejodkaz(url) {
    window.open(url, "_blank");
}

两者都只适用于firefox。有什么方法，它如何在chrome和IE中工作？

JS：

function zrus1() {
    document.getElementById("okno1").innerHTML ='CYKLOPRŮVODCE
    <br>Cyklistika';
}

function zobraz1(){
    var doba=3000;
    document.getElementById("okno1").innerHTML = '<img src="kolo.jpg"
    alt="Cyklistika" name="img">';
    window.setTimeout('zrus1();',doba);
}

CSS

okno1 {
    display: inline-block;
    cursor: pointer;
    position: relative;
    float: left;
    width: 17%;
}

Answer 1

这似乎可以解决问题。我没有费心去追查为什么你的尝试失败了。差异包括（0）附加事件处理程序而不是使用内联JS （1）在5s期间删除okno1元素的mouseover处理程序，使其内容发生变化。

适用于Chrome，IE 11.Chrome在浏览器窗口中显示父文件夹，IE在资源管理器窗口中打开它。

＆＃13;

function byId(id){return document.getElementById(id);}

window.addEventListener('load', onDocLoaded, false);

function onDocLoaded(evt)
{
    var okno1 = document.registerElement('okno-1'); // okno1 is an invalid tag-name
	byId('okno1').addEventListener('mouseover', onMouseOver, false);
}

function onMouseOver(evt)
{
	this.removeEventListener('mouseover', onMouseOver);
	this.innerHTML = "<img src='kolo.jpg' alt='Cyklistika' name='img'>";

	window.setTimeout(onTimerElapsed, 5000);
}

function onTimerElapsed(evt)
{
	var tgt = byId('okno1');
	tgt.innerHTML = ' ...  ';
	tgt.addEventListener('mouseover', onMouseOver, false);
}

＆＃13;

okno-1
{
    display: inline-block;
    cursor: pointer;
    position: relative;
    float: left;
    width: 17%;
}

＆＃13;

<a href=".." target="_blank"><okno-1 id="okno1"> ...  </okno-1></a>

＆＃13;

Answer 2

试试这个..

<!DOCTYPE html>
<html>
<head>
<style>
a.okno1 { 
     display:block;
     width:250px;
     height:250px; 
     float:left;
     border: 1px solid blue; 
}
</style>
</head>
<body>
    <div>
          <a class="okno1" href="new_page.html" target="_blank">
          <p id="okno1" onMouseOver="zobraz1();">hello</p>    
     </a>    
   </div>
<script>
    function zrus1(){
    document.getElementById("okno1").innerHTML ='HELLO';
    }

    function zobraz1(){
    var doba=3000;
    document.getElementById("okno1").innerHTML = '<img src="kolo.png" alt="Cyklistika" name="img">';
    window.setTimeout('zrus1()',doba);
    }
</script>
</body>
</html>

Anchor标签仅适用于firefox

2 个答案: