鼠标仅在转到特定点时悬停,而不是在整个文本上悬停

Mouse is hovering only when you go to a particular point and not on the whole text

本文关键字:悬停 文本 鼠标      更新时间:2023-09-26

我有一个超链接,如果我试图悬停在上,它只会悬停在光标的特定点上。但我希望它悬停在整个文本上。但我做不到。请帮帮我。这是代码:

<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>标记中的第一个元素悬停。

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

<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>

或者,至少稍微分散一点,比如在你的跨度标签之后。

    <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>

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

<html>
<head>
<style>
li:first-child a:hover,li:first-child a:hover+span{background-color:gray}

</style>
</head>

在标题中使用以上代码。。。