Question

我有一个超链接，如果我尝试将鼠标悬停在上，只有在光标的特定位置，它才会悬停。但我希望它悬停在整个文本上。但我无法做到。请帮我。这是代码：

<div class="container">
    <ol class="breadcrumb">
        <li ng-repeat="crumb in breadcrumbs" ng-class="{ active: $last }"><a
            ui-sref="{{ crumb.route }}" ng-if="!$last" translate>{{ crumb.displayName
                }}&nbsp;</a><span ng-show="$last" translate>{{ crumb.displayName
                }}</span></li>
    </ol>
</div>

我希望<li>标记中的第一个元素悬停。

Answer 1

您的标签不应该出现在列表之前吗？

<div class="container">
<ol class="breadcrumb">
    <li ng-repeat="crumb in breadcrumbs" ng-class="{ active: $last }"><a
        ui-sref="{{ crumb.route }}" ng-if="!$last" translate>{{ crumb.displayName
            }}&nbsp;</a><span ng-show="$last" translate>{{ crumb.displayName
            }}</span></li>
</ol>

<div class="container">
<ol class="breadcrumb">
    <li ng-repeat="crumb in breadcrumbs" ng-class="{ active: $last }"><a ui-sref="{{ crumb.route }}" ng-if="!$last" translate>{{ crumb.displayName
            }}&nbsp;<span ng-show="$last" translate>{{ crumb.displayName
            }}</span></a></li>
</ol>

或者，至少再展开一些，例如在你的span标签之后。

    <div class="container">
<ol class="breadcrumb">
    <a ui-sref="{{ crumb.route }}" ng-if="!$last" translate><li ng-repeat="crumb in breadcrumbs" ng-class="{ active: $last }">{{ crumb.displayName
            }}&nbsp;<span ng-show="$last" translate>{{ crumb.displayName
            }}</span></li></a>
</ol>

如果你有一个这样看的例子，这可能会让我更容易回答这个问题。

Answer 2

<html>
<head>
<style>

li:first-child a:hover,li:first-child a:hover+span{background-color:gray}


</style>
</head>

在标题中使用上述代码......

只有当您转到特定点而不是整个文本时，鼠标才会悬停

2 个答案: