Question

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

我想拥有它，所以你也可以点击其中一行，它专注于那一行，在右侧显示它并禁用其他行上的悬停，直到你点击/做某事等。 / p>

我已经查看了ng-mouseover on disabled button in Angularjs，但该答案使用了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>

JS

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

任何帮助都会受到赞赏，不知道如何继续这个！

编辑：花了一段时间，但这里有一个小提示，显示了一个更基本的概述。 http://jsfiddle.net/v7hx8nho/3/在悬停时显示该项目的标题，点击后显示该项目，在您点击之前不再悬停。

Answer 1

很少有建议，

您可以使用CSS来禁用其他元素上的鼠标事件， https://developer.mozilla.org/en/docs/Web/CSS/pointer-events 因此，当您想要禁用悬停时，请使用ng-class或其他内容添加此样式。
在你的ng-mousever事件处理函数中，创建一个if条件并检查是否显示信息，例如

    $scope.hoverFocus = function(doc) {
      if ($scope.on == false) return;

      $scope.showInfo = true;
      $scope.infoDoc = doc;
    }

Answer 2

你去了：http://jsfiddle.net/v7hx8nho/11/ enter code here

你可以设置一个布尔值，如果它被点击了或者没有点击它并在hoverFunction中检查......在它真实之后，标题就在那里，没有悬停，在你第二次点击之后，这是假的，悬停开启......干杯

单击时禁用ng-mouseover

2 个答案: