Html 单击时禁用ng鼠标悬停

我有一个由10个元素组成的表格列表，向左浮动，当您将鼠标悬停在任何一行上时，它会在页面右侧的div中更详细地显示该对象

我想要它，这样你也可以点击其中一行，它聚焦于那一行，在右边显示，并禁用其他行上的悬停，直到你点击关闭/做些什么等等

我已经看过了，但是这个答案使用了css-不知道如何将它合并到我的代码中（完全重组它是一个选项！）

HTML

</div>
    <div class="row" ng-show="resultsExist">
        <div class="col-lg-6 col-md-6">
            <table class="table">
                <tr ng-repeat="doc in docs" ng-init="index = $index + 1" ng-mouseenter="hoverFocus(doc)" ng-click="clickFocus(doc)">
                    <td>{{index}}</td>
                    <td>{{doc.headline.main}}</td>
                </tr>
            </table>
        </div>
        <div class="col-lg-6 col-md-6">
            <div ng-show="showInfo">
                <p>Publication Date: {{infoDoc.pub_date}}</p>
                <h2>{{infoDoc.headline.main}}</h1>
                <h3>{{infoDoc.lead_paragraph}}</h3>
                <p> Source: {{infoDoc.source}}</p>
                <button target="_blank" href="{{infoDoc.webUrl}}"> See full link here</button>
            </div>
        </div>
    </div>

任何帮助都将不胜感激，不知道如何继续

编辑：花了我一段时间，但这里有一把小提琴，显示了一个更基本的概述。在悬停显示该项目的标题时，单击“显示该项目”，在单击“关闭”之前不再悬停。

几点建议

您可以使用CSS禁用其他元素上的鼠标事件， 因此，当您想要禁用悬停时，请使用ng类或其他方法添加此样式

在ng mousever事件处理函数上，创建一个if条件并检查是否显示信息，例如

$scope.hoverFocus=函数（doc）{
如果（$scope.on==false）返回；
$scope.showInfo=true；
$scope.infoDoc=doc；
}

很少有建议

您可以使用CSS禁用其他元素上的鼠标事件， 因此，当您想要禁用悬停时，请使用ng类或其他方法添加此样式

在ng mousever事件处理函数上，创建一个if条件并检查是否显示信息，例如

$scope.hoverFocus=函数（doc）{
如果（$scope.on==false）返回；
$scope.showInfo=true；
$scope.infoDoc=doc；
}

好了：

在这里输入代码

您可以设置一个布尔值，如果单击与否，并在hoverFunction中检查它…为真后，标题在那里，没有悬停，第二次单击后，它为假，悬停打开…干杯

好了：

在此处输入代码

---

您可以设置一个布尔值，如果单击与否，并在hoverFunction中检查它…为真后，标题在那里，没有悬停，第二次单击后，它为假，悬停打开…干杯

您能将其放入小提琴或堆栈溢出片段中，以便我能看到实际发生的情况吗？谢谢，第一次给我一点时间使用提琴，添加到问题中好的，等一下，我可能有一个想法…我实际上使用了Akhil.cs的解决方案，但如果能看到另一个解决方案，我会很感兴趣的！谢谢你，尽管我速度不够快，希望你也能看看我的解决方案。干杯。你能把它放在提琴或stackoverflow片段中，这样我就可以看到实际的内容了碰巧..谢谢你第一次使用小提琴时给我一点时间，添加到问题中好的，等一下，我可能有个想法…我实际上使用了Akhil.cs的解决方案，但如果看到另一个解决方案会很有趣！谢谢你，虽然我速度不够快，希望你也能看看我的解决方案。干杯。最后选择了你的第二个解决方案，不是吗i don’我不相信我错过了做这么简单的事情。做得很好，谢谢！最终选择了你的第二个选项，我不相信我错过了做这么简单的事情。做得很好，谢谢！最终实现了一个几乎相同的解决方案！谢谢anyway@Olly好吧，如果我的帖子对这个问题也有用的话，那就好了，如果你愿意的话投赞成票-谢谢，干杯。最终实现了一个几乎相同的解决方案！谢谢anyway@Olly好吧，如果我的帖子对这个问题也有用的话，那就好了，如果你投赞成票的话——谢谢，干杯。

$scope.hoverFocus = function(doc) {
        $scope.showInfo = true;
        $scope.infoDoc = doc;
    }
$scope.clickFocus = function() {
    // Not sure
}