Question

首先要说我根本不是Javascript开发人员，但我需要Javascript的小帮助。我有一个.php文件，它包含div，我将在其中包含另一个文件。

<html>
<body>

<div id="unityObject">div content</div>

<?php include_once('includes/b.php') ?>

</body>
</html>

b.php看起来像这样：

<nav id="myNavigation">
"content"
</nav>

现在我需要的是：当鼠标结束时，如果鼠标移出，则隐藏＆＃34; unityObject＆＃34;然后显示＆＃34; unityObject＆＃34;试。

我可以使用这个简单的代码隐藏＆＃34; unityObject＆＃34;：

<nav id="myNavigation"
onmouseover="document.getElementById ('unityObject').style.visibility = 'hidden';">

现在，如果我想展示＆＃34; unityObject＆＃34;再次，我需要检查someVar是否为真。例如：

if (someVar)
{
 "unityObject".style.visibility = "visible";
}
else
{
 "unityObject".style.visibility = "hidden";
}

但我知道如何将所有这些代码放在一起，我不能使用简单的代码

"onmouseout="document.getElementById ('unityObject').style.visibility = `'visible';"

因为它不能检查someVar。

Answer 1

首先，我建议你使用javascript为你的元素添加一个CSS类而不是操作内联样式，建议这样做是为了清楚地分离结构/内容（HTML），样式（CSS）和行为（Javascript））。同样，我提出了一个不使用内联事件处理程序的解决方案，而是在元素上使用addEventListener方法，as is suggested on MDN

以下内容虽然远非最佳，但却是您基本需要的代码。在HTML模板的结束<script>标记之前，将此代码插入</body>标记。

var d = document.getElementById('unityObject'),
    n = document.getElementById('myNavigation');

n.addEventListener('mouseover', hideDiv, true);
n.addEventListener('mouseout', showDiv, true);

function hideDiv(e) {
  d.className = 'hide';
}

function showDiv(e) {
 d.className = 'show';
}

然后添加CSS以设置show和hide类的样式：

.show {
  display: block;
}

.hide {
  display: none;
}

Answer 2

你可以使用onmouseover功能。像

    <nav id="myNavigation"
onmouseover="hideUnityObject()">

然后在你的html代码的某个地方你可以使用这样的东西。

<script>
    function hideUnityObject(){

         if (someVar){
         "unityObject".style.visibility = "visible";
        }else{
         "unityObject".style.visibility = "hidden";
        }
    }            
</script>

鼠标悬停/鼠标移动时隐藏/显示div

2 个答案: