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

Question

当我们将鼠标悬停在var Data = []; Data = QuickJV.slice(); Data=Data.FormOperations.List; 范围内时，我希望像下面的图片中的Major跨度一样跨度悬停。需要一些css实现。围绕它创建一个寄宿生以及编辑图标，如图

所示

需要实施

到目前为止我试过了

＆＃13;

＆＃13;

story

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

我使用了fontAwesome图标进行演示。

＆＃13;

＆＃13;

c

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

我使用了一些随机图片向您展示..请检查此片段并告诉我..

<span> Active</span>

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

Answer 3

render();
var data = document.getElementById("cv").toDataURL();
document.getElementById("placeholder").src = data;
window.setTimeout(function(){
  navigator.screenshot.save(function(error, res) {
    if (error) {
      console.error(error);
    } else {
      console.log('screenshot saved in: ', res.filePath);
      defer.resolve(res.filePath);
    }
    document.getElementById("placeholder").src = "";
  }, extension, quality, filename);
  return defer.promise;
},1000);

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