锚标签只能在Firefox中工作

我的页面上有一个名为“okno1”的框，其中包含一些文本，并且在鼠标悬停时，图片显示为cca 5sec文本返回后的文本。问题是，整个框“okno1”应该是一个链接到另一个页面，在Firefox中工作。我试了一下，如：锚标签只能在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%; 
}

来源

2016-09-14 Erik

你不能在Javascript多行字符串这种方式（更多的话题在这里：http://stackoverflow.com/questions/805107 /创建-多串式的JavaScript）。从字符串中删除换行符后，您的示例将在Chrome中开始工作。 –

由于'okno1'是一个自定义元素，你不需要注册它吗？ – evolutionxbox

我不确定我是否理解我的英文不好，在我的文档中，我喜欢...... innerHTML ='CYKLOPRŮVODCE
Cyklistika'; （1行）。我试图改变它像var c =“.....”; ... innerHTML = c，但它仍然不起作用，链接仅在Firefox中打开 – Erik

这似乎这样的伎俩。我没有去追寻为什么你的尝试失败了。差异包括（0）附加事件处理程序，而不是使用内联JS （1）删除其内容已更改的5s时期的okno1元素的鼠标悬停处理程序。

适用于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 
 
\t byId('okno1').addEventListener('mouseover', onMouseOver, false); 
 
} 
 

 
function onMouseOver(evt) 
 
{ 
 
\t this.removeEventListener('mouseover', onMouseOver); 
 
\t this.innerHTML = "<img src='kolo.jpg' alt='Cyklistika' name='img'>"; 
 

 
\t window.setTimeout(onTimerElapsed, 5000); 
 
} 
 

 
function onTimerElapsed(evt) 
 
{ 
 
\t var tgt = byId('okno1'); 
 
\t tgt.innerHTML = ' ... '; 
 
\t 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>

来源

2016-09-14 10:12:00 enhzflep

你不需要注册自定义元素吗？ – evolutionxbox

你_应该，但我还没有看到他们的使用失败，当这还没有完成。有关更多信息，请参见此处：https：//developer.mozilla.org/en-US/docs/Web/Web_Components/Custom_Elements – enhzflep

由于它是实验性的，假设它将继续不注册地工作，这意味着它可能会停止在未来。 – evolutionxbox

试试这个..

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

来源

2016-09-14 10:26:57 aries12

谢谢，它比以前更简单。然而，与前一个代码相比，如果您在www上查看代码，代码不会“闪烁”。页面...和图片保持，只要你有鼠标光标在盒子上，这是更好的，所以我宁愿使用它 – Erik

锚标签只能在Firefox中工作

回答

相关问题