Question

我有这个：

<div id="click"><a href="link.html"><img src="img/image.png" alt="something"></a>

<a 
   onmouseover="ReverseContentDisplay('cont'); return true;"
   href="javascript:ReverseContentDisplay('cont')">
info
</a>
</div>
<div id="cont"></div>

现在，当我将鼠标悬停在显示“信息”的文字位置时，会出现<div id="cont"></div>。但是，我现在需要更改标记，以便锚标记具有链接（而不是javascript函数），并在鼠标悬停发生时显示cont div。

Answer 1

我不确定我的理解是什么问题，但是如果你想保留悬停并仍然有工作链接，只需将网址放在href属性中。

其他提示：你在做什么不是语义的。期望将标记与行为或样式分开。您应该添加一个事件侦听器，以单击JavaScript中的链接。 2.记住渐进增强功能，并非每个人都启用了JavaScript。 3.为什么你在onmouseover中回归真实？如果它有目的（虽然我没有看到），你应该在函数中返回true。

Answer 2

Here is an example of what you may want to do。它通过从HTML中删除JS来提供不引人注目的Javascript。 HTML是：

<div id="click"><a href="link.html"><img src="img/image.png" alt="something"></a>
    <!-- the href attribute below should have whatever link you want -->
    <a id="showCont" href="http://www.google.com">info</a>
</div>
<div id="cont">Cont</div>

javascript将位于从<script>标记引用的单独文件中，并且是：

window.onload = init; // call init on load

function init() {
    document.getElementById("showCont").onmouseover = function() { ReverseContentDisplay("cont") }; // set up the onmouseover handler
}

function ReverseContentDisplay(id) {
    var elem = document.getElementById(id);
    if(elem.style.display === "block") {
        elem.style.display = "none";
    } else {
        elem.style.display = "block";
    }
}

CSS也将位于一个单独的文件中，以下内容隐藏了对象：

#cont {
    display:none;
}

两个功能

2 个答案: