如何在下拉列表中获取每个项目的不同悬停值？

Posted 2023-02-22

【中文标题】如何在下拉列表中获取每个项目的不同悬停值？

【英文标题】：How to get different hover-over values of each item in a drop down?

【发布时间】：2022-01-23 20:24:51

【问题描述】：

假设我们正在使用 angular2-multiselect-drop down。将不同悬停在下拉菜单中不同项目的值上的正确方法是什么？

在普通的html中，如果你硬编码，你可以直接访问下拉列表的每个元素，你可以为每个项目设置样式css。

但是我怎么能在一个有角度的下拉菜单中做到这一点呢？

【问题讨论】：

请提供足够的代码，以便其他人更好地理解或重现问题。

【参考方案1】：

您可以使用以下代码实现此目的，

您的 CSS 如下所示，

/* Tooltip container */
.tooltip 
    border: 2px solid #f5f5f5;
    margin-left: 10%;
    padding:20px;
    max-height: 10%;
    width: 300px;
    position: relative;
    display: block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
  
  
  /* Tooltip text */
  .tooltip .tooltiptext 
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
   
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
  
  
  /* Show the tooltip text when you mouse over the tooltip container */
  .tooltip:hover .tooltiptext 
    visibility: visible;
  

您的 HTML 如下所示，

<h1>See the numbers in tooltip when they change</h1>
<div *ngFor="let i of ['a','b','c','d','e','f']; let j = index;" class="tooltip">
  <span>i</span>
  <span class="tooltiptext">new tooltip text every time j</span>
</div>