尝试从 'hover' CSS 过渡到类似的 javascript 功能。失败了

Question

我很抱歉不得不 post 一个有点菜鸟（可能是语法）的问题，但我今天已经研究这个问题好几个小时了。我在互联网上到处都是，包括这个网站上的许多 post，但我只是没有找到我需要的东西（或者我认为是这样。）问题可能是我对 javascript 缺乏经验。我希望有人能告诉我我的错误在哪里。

背景 - 我正在开发的 Web 应用程序托管在 ColdFusion 2016 服务器上。我认为这不一定与这篇文章相关，但也许吧。

我有一个图标，悬停在 "slides out" 一个 'Quick Notes' 面板上（通过向右过渡：CSS 中的属性从 -500px 到 500px）。在这里，用户可以在 RTF 文本区域中输入注释，然后提交以更新他们在用户 table 中的记录。这工作正常。

这是图标 (notes_slideout) 和主要注释部分 (notes_slideout_inner) 的相关 CSS，以及工作正常的悬停内容。

#notes_slideout {
        position: fixed;
        bottom: 104px;
        right: 0;
        width: 32px;
        height: 32px;
        padding: 5px;
        text-align: center;
        background: #454545;
        -webkit-transition-duration: 1s;
        -moz-transition-duration: 1s;
        -o-transition-duration: 1s;
        transition-duration: 1s;
        border-top-left-radius: 10px; 
        border-bottom-left-radius: 10px;
        box-shadow: 
            0 2px 2px 0px black;
        z-index:1; 
    }

    #notes_slideout_inner {
        position: fixed;
        bottom: 104px;
        top: 35px;
        right: -500px;
        background: #454545;
        width: 500px;
        padding-top: 10px;
        height: auto;
        text-decoration: none; 
        color: white;
        font-size:18px;
        font-family:Arial, Helvetica, sans-serif; 
        vertical-align:center;
        -webkit-transition-duration: 1s;
        -moz-transition-duration: 1s;
        -o-transition-duration: 1s;
        transition-duration: 1s;
        box-shadow:
            0 2px 2px 0px black; 
        z-index:1;
    }



#notes_slideout:hover {
        right: 500px;
        z-index:1;
    }

    #notes_slideout:hover #notes_slideout_inner {
        right: 0;
        z-index:1;
    }

此设置的问题在于，如果用户将 away/loses 焦点悬停在 slideout_inner div 上，比如通过单击文本区域输入注释，它会滑回按照设计在右边。

我想做的是使用 onClick 并让 javascript 执行基本相同的 CSS 设置更改并切换按钮功能。

这是我在图片上的标签：

    <img src="/#sys_var#/resources/images/notepad_icon.png" alt="Notes" height="32" onClick="openNotes()"/>

下面是我定义的函数：

    <script type="text/javascript">
function openNotes() {
    document.getElementById("notes_slideout_inner").style.right = "500px";
    document.getElementById("notes_slideout").onClick = "closeNotes()";

}

function closeNotes() {
    document.getElementById("notes_slideout_inner").style.right: = "-500px";
    document.getElementById("notes_slideout").style.right: = "0px";
    document.getElementById("notes_slideout").onClick = "openNotes()";
}
</script>

我已经尝试过 adding/removing

type="text/javascript"

来自脚本标签（none 我们的其他工作函数有它），以及使 onClick 看起来像这样：

onClick="javascript:openNotes()"

两者的结果相同。

所以当我去测试时，我注释掉了 CSS 中的最后两个 'hover' 部分并且悬停被破坏了（正如预期的那样）并且当你点击时按钮似乎什么都不做它。但是，经检查它会产生错误 -

SCRIPT438: Object doesn't support property or method 'matches'

刚刚我第一次看到一个全新的错误：

SCRIPT5009: 'openNotes' is undefined

非常感谢您分享任何见解。如果您认为我应该包含更多相关代码，我很乐意 post。这个应用程序非常复杂，所以我试着去掉并提供相关的部分，但我可能忽略了一些东西。我非常感谢这个网站上的每一个人。这些年来，你一次又一次地救了我。

编辑：不确定我是怎么错过这个的，但看起来它可能有用？

https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp

Answer 1

您已将内部 div #notes_slideout_inner 定位为 top:32px;，这是外部 div #notes_slideout 的大小，即 width:32px。

因此，每当您将鼠标悬停在外部 div 上并尝试在内部 div 上达到 :hover 时，它已经比您悬停的位置低 32px。因此它向后滑动。

也许您要找的是：

#notes_slideout {
        position: fixed;
        bottom: 104px;
        right: 0;
        width: 32px;
        height: 32px;
        padding: 5px;
        text-align: center;
        background: #454545;
        -webkit-transition-duration: 1s;
        -moz-transition-duration: 1s;
        -o-transition-duration: 1s;
        transition-duration: 1s;
        border-top-left-radius: 10px; 
        border-bottom-left-radius: 10px;
        box-shadow: 
            0 2px 2px 0px black;
        z-index:1; 
    }

    #notes_slideout_inner {
        position: absolute;
  display:inline-block;
  height:500px;
  width:500px;
        top: 0;
        right: -500px;
        background: #454545;
        padding-top: 10px;
        text-decoration: none; 
        color: white;
        font-size:18px;
        font-family:Arial, Helvetica, sans-serif; 
        vertical-align:center;
        -webkit-transition-duration: 1s;
        -moz-transition-duration: 1s;
        -o-transition-duration: 1s;
        transition-duration: 1s;
        box-shadow:
            0 2px 2px 0px black; 
        z-index:10;
    }



#notes_slideout:hover {
        right: 500px;
    }

<div id="notes_slideout">
 <div id="notes_slideout_inner">
  <input />
 </div>
</div>

Answer 2

css

#notes_slideout {
            position: fixed;
            bottom: 104px;
            right: 0;
            width: 32px;
            height: 32px;
            padding: 5px;
            text-align: center;
            background: #454545;
            -webkit-transition-duration: 1s;
            -moz-transition-duration: 1s;
            -o-transition-duration: 1s;
            transition-duration: 1s;
            border-top-left-radius: 10px; 
            border-bottom-left-radius: 10px;
            box-shadow: 
                0 2px 2px 0px black;
            z-index:1; 
        }

        #notes_slideout_inner {
            position: fixed;
            bottom: 104px;
            top: 35px;
            right: -500px;
            background: #454545;
            width: 500px;
            padding-top: 10px;
            height: auto;
            text-decoration: none; 
            color: white;
            font-size:18px;
            font-family:Arial, Helvetica, sans-serif; 
            vertical-align:center;
            -webkit-transition-duration: 1s;
            -moz-transition-duration: 1s;
            -o-transition-duration: 1s;
            transition-duration: 1s;
            box-shadow:
                0 2px 2px 0px black; 
            z-index:1;
        }

html

<div id="notes_slideout" onclick="toggleNotes()">            
</div>
<div id="notes_slideout_inner">
</div>

javascript

function toggleNotes() {                  
  if (elm("notes_slideout").style.right == "0px") {
    elm("notes_slideout").style.right = "500px";
    elm("notes_slideout_inner").style.right = "0px";
  } else {
    elm("notes_slideout").style.right = "0px";
    elm("notes_slideout_inner").style.right = "-500px";
  }
}


function elm(elementId) {
    return document.getElementById(elementId);
}

尝试从 'hover' CSS 过渡到类似的 javascript 功能。失败了

Trying to convert from a 'hover' CSS transition to similar javascript functionality. And failing

html

javascript

css

coldfusion