Блог

Главная - Вопросы по программированию - как сделать свойство hover span с angular 2

как сделать свойство hover span с angular 2

#html #css #angular

#HTML #css — код #угловатый

Вопрос:

Я хочу сделать наведение span, как этот Major span на изображении ниже, когда мы наводим курсор, он просто выглядит как story span . нужна какая-то реализация css. чтобы сделать границу вокруг него, а также значок редактирования, как показано на рис

Необходимо внедрить

введите описание изображения здесь

Я пробовал до сих пор

 span:hover {
    border : 2px solid;
    border-color : darkgrey;
    cursor: pointer;
} 
 <span> Active</span>

Комментарии:

1. О какой части изображения вы говорите?

2. Major при наведении курсора я выгляжу так, как показано на рисунке

3. в противном случае это выглядит так story

4. Добавьте эту важную информацию в свой вопрос, чтобы людям не приходилось догадываться.

5. вам нужно будет использовать javascript для отображения чего-то, что вы хотите.

Ответ №1:

Пример кода приведен ниже. Вы можете получить основную идею из этого.

Я использовал значки 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>

Комментарии:

1. @MalikKashmiri рад помочь.

Ответ №2:

Я использовал несколько случайных изображений, чтобы показать вам .. Пожалуйста, проверьте этот фрагмент и дайте мне знать..

 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:

 span:hover{
    border : 2px solid;
    border-color : darkgrey;
    cursor: pointer;
} 
 <span> Active</span>

Метки: