Javascript AngularJS/CSS-鼠标悬停时显示/隐藏元素

此代码仅将

.current

类应用于我的span，但span一开始并不隐藏。我希望它被隐藏，然后在

hover+ctrl

-显示，然后在

mouseleave

-再次隐藏。我怎样才能做到这一点

html:

减：

---

根据这个问题，这是我的解决方案，悬停时，

ng mouseover（$event）

将跟踪悬停，然后if条件将检查是否按下了

ctrl

键，您需要通过函数传递

$event

。然后在鼠标离开时，您需要使用

ng mouseleave

指令来检测这一点，并调用另一个函数来再次隐藏它

现在来回答您的问题，如果您希望span被初始隐藏，那么只需将类

hidden

添加到

span

中即可

我添加了下面的CSS类，这样容器就不会变得很小，以便于轻松悬停

.portlet-titlebar {
  border: 1px solid black;
  min-height: 50px;
}

这是一个工作演示，让我知道如果有任何问题，我们可以解决它

---

---

基于这个问题，这是我的解决方案，悬停时，

ng mouseover（$event）

将跟踪悬停，然后if条件将检查是否按下了

ctrl

键，您需要通过函数传递

$event

。然后在鼠标离开时，您需要使用

ng mouseleave

指令来检测这一点，并调用另一个函数来再次隐藏它

现在来回答您的问题，如果您希望span被初始隐藏，那么只需将类

hidden

添加到

span

中即可

我添加了下面的CSS类，这样容器就不会变得很小，以便于轻松悬停

.portlet-titlebar {
  border: 1px solid black;
  min-height: 50px;
}

这是一个工作演示，让我知道如果有任何问题，我们可以解决它

---

---

---

我建议你只使用css制作它-即

。移除：hover{…}

我会，但它必须在按下hover+ctrl键时显示，而不仅仅是在hover上。@Vluis如果它已经隐藏了，你将如何在它上面悬停？我将在它的父div上悬停。我建议你只使用css制作它-即

。移除：hover{…}

我会，但是它必须在按下hover+ctrl键时显示，而不仅仅是在hover上。@Vluis如果它已经隐藏了，你将如何在它上面悬停？我将在它的父div上悬停。啊，非常感谢，但唯一的问题是我无法访问元素为[0]的元素。parentNode因为我发布的代码只是一个片段，上面还有其他元素，所以它不起作用了。我尝试了：angular.element（element.getElementsByClassName（“删除隐藏”））.removeClass（“隐藏”）；但是我在客户端中遇到了一个错误。getElementsByClassName不是一个函数我将其更改为：var result=document.getElementsByClassName（“删除隐藏”）；var wrappedResult=角度元素（结果）；但出于某种原因，悬停不起作用，你知道为什么吗？scope.hoverOut=function（）{var result=document.getElementsByClassName（“remove hidden”）；var wrappedResult=angular.element（result）；wrappedResult.removeClass（'current'）；wrappedResult.addClass（'hidden'）；}@Vluis您能检查我更新的答案吗？问题是angular没有找到特定父元素的好方法，因此我从事件中获取元素，即

portlet标题栏

，然后找到span，我们可以使用

.find（）

方法来查找

span

@Vluis这对您有帮助吗？@Vluis太棒了！很高兴提供帮助：）非常感谢，但唯一的问题是我无法使用元素[0]访问元素。parentNode因为我发布的代码只是一个片段，上面还有其他元素，所以它无法工作。我尝试了：angular.element（element.getElementsByClassName（“删除隐藏”））.removeClass（“隐藏”）；但是我在客户端中遇到了一个错误。getElementsByClassName不是一个函数我将其更改为：var result=document.getElementsByClassName（“删除隐藏”）；var wrappedResult=角度元素（结果）；但出于某种原因，悬停不起作用，你知道为什么吗？scope.hoverOut=function（）{var result=document.getElementsByClassName（“remove hidden”）；var wrappedResult=angular.element（result）；wrappedResult.removeClass（'current'）；wrappedResult.addClass（'hidden'）；}@Vluis您能检查我更新的答案吗？问题是angular没有找到特定父元素的好方法，因此我从事件中获取元素，即

portlet标题栏

，然后找到span，我们可以使用

.find（）

方法来查找

span

@Vluis这对您有帮助吗？@Vluis太棒了！很乐意帮忙：）

  .hidden{
    display:none;
  }

  .current{
    display: block;
    border: 1px solid red;
  }

.portlet-titlebar {
  border: 1px solid black;
  min-height: 50px;
}