Question

已经存在一个bootstrap popover。它需要在悬停时显示。以下是现在显示的结果：

在红色按钮中看到红色的浅色轮廓，单击按钮时完成。我需要的是，当鼠标悬停在红色或绿色按钮上时，它应该高亮，就像突出显示红色按钮的屏幕截图一样。

以下是我使用的代码：

<button type="button" class="btn {{.Status | statusButtonClass}} btn-circle" 
data-toggle="popover" data-placement="right" data-content="{{.Status}}">
   <i class="glyphicon glyphicon-ok"></i>
</button>

.btn-circle.btn-lg::hover {
   width: 50px;
   height: 50px;
   padding: 10px 16px;
   font-size: 18px;
   line-height: 1.33;
   border-radius: 25px;
}
.btn-circle:hover { 
   width: 30px;
   height: 30px;
   text-align: center;
   padding: 6px 0;
   font-size: 12px;
   line-height: 1.428571429;
   border-radius: 25px;
   opacity: 1;
   border-width: 3px;
}

在.statusButtonClass中，我获得了颜色的价值。 Default.json文件状态终止十个红色，如果它运行，则颜色为绿色。 class =“btn {{.Status | statusButtonClass}} btn-circle。

Answer 1

请参阅以下代码：

＆＃13;

.button {
    position: relative;
    border-radius: 50%;
    background-color: red;
    height: 100px;
    width: 100px;
    border: none;
}
.button:hover {
border: 9px solid pink;
 opacity:0.8;
}

＆＃13;

<button class="button"></button>

＆＃13;

征求意见

我使用css变量标题：https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

并向边框颜色调用声明新管道： statusButtonBorderColor

<强> CSS：

.button {
    position: relative;
    border-radius: 50%;
    background-color: var(--color);
    height: 100px;
    width: 100px;
    border: none;
}
.button:hover {
border: 9px solid var(--borderColor);
 opacity:0.8;
}

CSS变量示例：

＆＃13;

    .button {
        position: relative;
        border-radius: 50%;
        background-color: var(--color);
        height: 100px;
        width: 100px;
        border: none;
    }
    .button:hover {
    border: 9px solid var(--borderColor);
     opacity:0.8;
    }

＆＃13;

<button class="button" style="--color:red;--borderColor:pink"></button>

＆＃13;

Answer 2

您可以在悬停时应用框阴影，这样可以达到您想要的效果。

.btn-circle {
  width: 60px;
  height: 60px;
  border-radius: 50px;
}

.btn-danger{  
  background-color:red;  
  border-color: red;
}

.btn-danger:hover {
   box-shadow: 0 0 1pt 4pt #f47f90;
}

您可以通过json（或任何您想要的名称）申请.btn-danger

可以找到关于box-shadow的更多详细信息here

我还创建了一个pen。

如何在html中按钮悬停显示？

2 个答案: