Fatal编程技术网
  • javascript/
  • 将鼠标悬停在Javascript文本框上

将鼠标悬停在Javascript文本框上

javascript html css

将鼠标悬停在Javascript文本框上,javascript,html,css,textbox,hover,Javascript,Html,Css,Textbox,Hover,我有一个非常简单的javascript代码，我需要为我的网站，但它没有工作，因为我希望。。。这是一个文本悬停框，当我将鼠标悬停在按钮上时，它会自动消失。代码只使用一个按钮，但我需要更多的按钮。当我添加第二个具有相同鼠标悬停框效果的按钮时，它似乎不再起作用（当我将鼠标悬停在任何按钮上时，它只悬停第二个文本）。我的问题是，我是否可以在多个按钮上添加相同的悬停框效果，但每个框上的文本不同。这是我到目前为止得到的 Javascript： var oVTog = { toggle: functi

我有一个非常简单的javascript代码，我需要为我的网站，但它没有工作，因为我希望。。。这是一个文本悬停框，当我将鼠标悬停在按钮上时，它会自动消失。代码只使用一个按钮，但我需要更多的按钮。当我添加第二个具有相同鼠标悬停框效果的按钮时，它似乎不再起作用（当我将鼠标悬停在任何按钮上时，它只悬停第二个文本）。我的问题是，我是否可以在多个按钮上添加相同的悬停框效果，但每个框上的文本不同。这是我到目前为止得到的

Javascript：

var oVTog = 
{
    toggle: function (el) 
    {
        oVTog.container = el.parentNode;
        oVTog.para = oVTog.container.getElementsByTagName('p')[0];  
        oVTog.para.style.display = "none";

        el.onmouseover = function () 
        {
            oVTog.para.style.display = '';
            return false;
        };

        el.onmouseout = function () 
        {
            oVTog.para.style.display = 'none';
            return false;
        };

        el.onclick = function () 
        {
            oVTog.para.style.display = oVTog.para.style.display == 'none' ? '' : 'none';
            return false;
        };
    }
};

window.onload = function () 
{
    var l = document.getElementById('togTrigger');
    oVTog.toggle(l);
    var l = document.getElementById('togTrigger2');
    oVTog.toggle(l);
};
CSS:

以及HTML：

<body id="bd">
    <div id="theTog" class="TogWrap">
        <a href="#" id="togTrigger">Lorem ipsum One</a>
        <p class="togContent">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna. 
            Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada 
            convallis, sagittis vitae, convallis sit amet, lectus.
        </p>
    </div>

    <div id="theTog" class="TogWrap">
        <a href="#" id="togTrigger2">Lorem ipsum One</a>
        <p class="togContent">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna. 
            Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada 
            convallis, sagittis vitae, convallis sit amet, lectus.
        </p>
    </div>
</body>




Lorem ipsum dolor sit amet，是一位杰出的领导者。莫里斯·麦格纳。
非tellus的精英。马莱苏阿达，库拉比图尔·厄罗斯·胡斯托
康瓦利斯，生命矢状位，康瓦利斯坐在阿梅特，莱克托斯。




Lorem ipsum dolor sit amet，是一位杰出的领导者。莫里斯·麦格纳。
非tellus的精英。马莱苏阿达，库拉比图尔·厄罗斯·胡斯托
康瓦利斯，生命矢状位，康瓦利斯坐在阿梅特，莱克托斯。
tl；博士

解释

这不起作用的原因是使用对象而不是局部范围，并且两次声明变量。另一个问题是一些DOM不正确，它影响了正确应用样式的能力

  • 使用局部变量，而不是将它们附加到对象

    不应使用持有触发器函数的对象来承载元素。而是将它们设置为触发器函数的本地。它们的作用域将保留在附加到传入元素的事件的本地

    toggle: function (el) {
 var container = el.parentNode;
 var para = container.getElementsByTagName('p')[0];
 ...etc.
  • 避免两次声明变量

    变量不应声明两次。如果变量已经用
    var
    声明，则不要使用
    var
    声明变量。此代码

    var l = ...
var l = ...
    应该成为

    var l = ...
l = ...
  • 保持
    id
    s唯一

    dom元素上的ID应该是唯一的，而不是重复的。 也许应该是

    <div id="theTog1"
<div id="theTog2"
    您可能希望将一个
    class=“toggtrigger”
    分配给希望在其上使用此功能的元素，然后您可以修改css定义

    .togTrigger {...}
    最后，一切都是这样，工作演示：

    JSFIDLE代码

    html

    js

    tl；博士

    解释

    这不起作用的原因是使用对象而不是局部范围，并且两次声明变量。另一个问题是一些DOM不正确，它影响了正确应用样式的能力

  • 使用局部变量，而不是将它们附加到对象

    不应使用持有触发器函数的对象来承载元素。而是将它们设置为触发器函数的本地。它们的作用域将保留在附加到传入元素的事件的本地

    toggle: function (el) {
 var container = el.parentNode;
 var para = container.getElementsByTagName('p')[0];
 ...etc.
  • 避免两次声明变量

    变量不应声明两次。如果变量已经用
    var
    声明，则不要使用
    var
    声明变量。此代码

    var l = ...
var l = ...
    应该成为

    var l = ...
l = ...
  • 保持
    id
    s唯一

    dom元素上的ID应该是唯一的，而不是重复的。 也许应该是

    <div id="theTog1"
<div id="theTog2"
    您可能希望将一个
    class=“toggtrigger”
    分配给希望在其上使用此功能的元素，然后您可以修改css定义

    .togTrigger {...}
    最后，一切都是这样，工作演示：

    JSFIDLE代码

    html

    js

    问题是您正在将要隐藏的段落和容器存储在全局变量中，
    oVTog.container
    和
    oVTog.para
    。因此，当您尝试将其用于两个不同的节点时，它们会相互覆盖

    最简单的解决方案是将这些值存储在局部变量中

    问题是您正在将要隐藏的段落和容器存储在全局变量中，
    oVTog.container
    和
    oVTog.para
    。因此，当您尝试将其用于两个不同的节点时，它们会相互覆盖

    最简单的解决方案是将这些值存储在局部变量中

    您多次使用同一ID。ID是用来唯一地识别某物的。谢谢Lee的提示回答。。。你指的是哪个ID？你不止一次使用同一个ID。ID是用来唯一地识别某物的。谢谢Lee的提示回答。。。你指的是哪一个ID？我认为你对一些无关紧要的问题的讨论（仍然很重要，但在本例中并不相关）使我们更难弄清楚实际的问题是什么（由
    toggle
    函数共享的全局变量）。@JuanMendes-这个问题涵盖的内容太多了。还请注意，您的小提琴没有解决第二个切换上缺少的样式。此外，建议包含来自JSFIDLE的所有代码，因为该站点不可靠。太棒了！但除了文本本身，我还需要一个标题。。。我现在该怎么做？问题不在于CSS，这也是一个无关紧要的问题。我没有理由从JSFIDLE粘贴与问题无关的代码。真正的问题在我展示的代码中。@AlexTimuş-你可以简单地添加一个span来实现这一点。可能类似于：
    Title 1
    在
    元素内部，但在文本之前。也许有这样的风格：
    .togtTitle{font-family:Arial；font-size:150%；}
    下面是一个演示，题目是：我认为您对一些无关紧要的问题的讨论（仍然很重要，但在本例中并不相关）使我们更难弄清楚实际问题是什么（由
    toggle
    函数共享的全局变量）@JuanMendes-这个问题涵盖的内容太多了。还请注意，您的小提琴没有 
    var oVTog = {
    toggle: function (el) {    
        var para  = el.parentNode.getElementsByTagName('p')[0];
        para.style.display = "none";

        el.onmouseover = function () {
            para.style.display = '';
            return false;
        };
        el.onmouseout = function () {
            para.style.display = 'none';
            return false;
        };
        el.onclick = function () {
            para.style.display = para.style.display == 'none' ? '' : 'none';
            return false;
        };
    }
};