javascript - anchor 标记仅适用于 firefox

Question

在我的页面上，我有一个名为“okno1”的框，里面有一些文本，鼠标悬停时，在大约 5 秒的文本返回后，会出现一张图片而不是该文本。问题是，整个框“okno1”应该是指向另一个页面的链接，该页面在 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) 删除 okno1 元素的鼠标悬停处理程序，持续 5 秒，它的内容已更改。

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

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);
}

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

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