【问题标题】：how to do hover span property with angular 2如何用角度2做悬停跨度属性
【发布时间】：2017-02-23 21:28:29
【问题描述】：

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

需要实施

我试过了

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

&lt;span&gt; Active&lt;/span&gt;

【问题讨论】：

你说的是图片的哪一部分？
Major 当我们悬停时，我看起来像这样，如图所示
否则看起来像story
将重要信息添加到您的问题中，这样人们就不必猜测了。
你需要使用 javascript 来显示你想要的东西。

标签： html css angular

【解决方案1】：

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

&lt;span&gt; Active&lt;/span&gt;

【讨论】：

【解决方案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 很高兴为您提供帮助。