如何使悬停特定div应该隐藏，还有一个div应该以角度显示？

Question

这是小提琴https://jsfiddle.net/awkacLrj/

最初的问题 class =“vote-card-hov”应该是display：none。 当我悬停在“投票” class =“votepop”然后整个 class =“vote-card-hov”应显示：block而不是类= “投票卡”即可。

代表：https://jsfiddle.net/0s2fy0h5/1/

这里我尝试使用CSS

的相同方法

 all-voting-box .vote-card:hover .vote-card-hov
 {
  display:block;
  border:4px solid;
 }

但它不起作用。帮我解决这个问题，无论是角度还是CSS。

Answer 1

您可以使用角色模板，ng-mouseover，ng-mouseleave和ng-show执行此操作：

<span class="votepop" 
      ng-mouseover="hoverActive = true" 
      ng-mouseleave="hoverActive = false">VOTE</span>

然后：

<div ng-show="hoverActive">
  <p>...</p>
</div>

Demo

但是，我建议使用ng-click切换代替mouseover，因为移动设备上没有鼠标。

Answer 2

有两个问题： .失踪了 +应该用于选择兄弟

.all-voting-box .vote-card:hover + .vote-card-hov
 {
  display:block;
  border:4px solid;
 }

https://jsfiddle.net/amitfts/awkacLrj/1/