如何用角度2做悬停跨度属性

Posted 2023-03-06

【中文标题】如何用角度2做悬停跨度属性

【英文标题】：how to do hover span property with angular 2

【发布时间】：2017-02-23 21:28:29

【问题描述】：

我想在下图中像 Major span 那样进行跨度悬停，当我们将其悬停时，它看起来就像 story span 。需要一些CSS实现。在它周围做一个边界以及如图所示的编辑图标

需要实施

我试过了

span:hover 
    border : 2px solid;
    border-color : darkgrey;
    cursor: pointer;

<span> Active</span>

【问题讨论】：

你说的是图片的哪一部分？

Major 当我们悬停时，我看起来像这样，如图所示

否则看起来像story

将重要信息添加到您的问题中，这样人们就不必猜测了。

你需要使用 javascript 来显示你想要的东西。

【参考方案1】：

span:hover
    border : 2px solid;
    border-color : darkgrey;
    cursor: pointer;

<span> Active</span>

【参考方案2】：

我用一些随机的图片给你看..请检查这个 sn-p 并让我知道..

span:hover 
    border : 2px solid;
    border-color : darkgrey;
    cursor: pointer;
    vertical-align:top;

span img:first-child 
  display: none;  

span img:last-child 
  display: none;  

span:hover img:last-child 
  display: inline-block;
  width:14px;
   border : 2px solid;
    border-color : red;
  background:gray;
  

span:hover img:first-child 
  display: inline-block;  
   width:16px;

<span> <img src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_15-128.png" /> 
   
Active<img id="edit" title="click to edit" src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_12-128.png" /></span>

【参考方案3】：

示例代码如下。你可以从中得到基本的想法。

我使用 fontAwesome 图标进行演示。

div
  padding:5px 0px 5px 5px;
  display:inline-block;


.fa.fa-pencil
  background-color:grey;
  display:none;
  padding:4px;


.fa.fa-angle-double-up
  display:none;


div:hover .fa.fa-pencil
  display:initial;


div:hover .fa.fa-angle-double-up
  display:initial;


div:hover .fa.fa-bookmark
  display:none;


div:hover
  border : 1px solid grey;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>

<div>
 <i class="fa fa-bookmark"></i>
 <i class="fa fa-angle-double-up"></i>
  <span> Major </span>
  <i class="fa fa-pencil"></i>
</div>

【讨论】：

@MalikKashmiri 很高兴为您提供帮助。