Question

我试图在图标的工具提示上添加鼠标，但是只要我创建Style .ion-android-hand：before { 我相信我有些失踪，有人可以帮我吗？

.ion-android-hand: {
  visibility: visible;
  cursor: pointer;
}

.ion-android-hand:before {
  content: attr(data-text);
  background-color: rgba(0, 0, 0, 0.8);
  width: 14%;
  left: 70%;
  margin-left: 100px;
  height: 10%;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  display: block;
  z-index: 1;
  padding: 10px;
  font-size: 80%;
  font-style: normal;
  position: absolute;
  margin-top: 35px;
  cursor: pointer;
}

<div class="wash-icons">
  <i class="ion-android-hand" data-text="Hand free triggering system"></i>

我试图在图标的工具提示上添加鼠标，但是只要我创建Style .ion-android-hand：before { 我相信我有些失踪，有人可以帮我吗？

Answer 1

我不知道这是否对您有帮助，但这是基于我对您的问题的了解而开始的。

将鼠标悬停在红色方块上，因为它将用于电话，所以我建议使用:focus和:hover，因为电话上没有鼠标。悬停在手机上无法正常工作

.wash-icons{
  width: 20px;
  height:20px;
  background:red;
}
.wash-icons .ion-android-hand{
  visibility: hidden;
}
.wash-icons:hover .ion-android-hand, .wash-icons:focus .ion-android-hand {
  visibility: visible;
  cursor: pointer;
}

.ion-android-hand:before {
  content: attr(data-text);
  background-color: rgba(0, 0, 0, 0.8);
  /*width: 14%;*/
  left: 0%;
  margin-left: 20px;
  /*height: 10%;*/
  color: #fff;
  text-align: center;
  border-radius: 5px;
  display: block;
  z-index: 1;
  padding: 10px;
  font-size: 80%;
  font-style: normal;
  position: absolute;
  margin-top: 35px;
  cursor: pointer;
}

<div class="wash-icons">
  <i class="ion-android-hand" data-text="Hand free triggering system"></i>
</div>

编辑： 校正过程

默认将.ion-android-hand的可见性设置为visibility: hidden;
悬停其父项visibility时，将visibile更改为.wash-icons

让悬停的父母显示您的“ i”

Answer 2

请悬停绿色圆圈以查看工具提示

首先将visibility:hidden;设置为 .ion-android-hand

.ion-android-hand{
     visibility:hidden;
}

然后 :hover 将wash-icons可见（移动电话不要悬停，请尝试 :focus ）

.wash-icons:hover .ion-android-hand,
.wash-icons:focus .ion-android-hand{
  visibility: visible;
}

还为洗涤图标添加了一些样式，以显示绿色圆圈。

.wash-icons{
  background:#00cc00;
  border-radius:30px;
  width:60px;
  height:60px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

.ion-android-hand:before {
  content: attr(data-text);
  background-color: rgba(0, 0, 0, 0.8);
  width: 100px;
  left: 0;
  height: 50px;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  display: block;
  z-index: 1;
  padding: 10px;
  font-size: 80%;
  font-style: normal;
  position: absolute;
  margin-top: 35px;
  cursor: pointer;
}
.ion-android-hand{
  visibility: hidden;
  cursor: pointer;
}
.wash-icons:hover .ion-android-hand,
.wash-icons:focus .ion-android-hand{
  visibility: visible;
  cursor: pointer;
}

<div class="wash-icons">me
  <i class="ion-android-hand" data-text="Hand free triggering system"></i>
</div>

工具提示的顶部添加了箭头

此处演示

.wash-icons{
  background:url(https://i.stack.imgur.com/FnfUn.png);
  background-size:contain;
  border-radius:50%;
  width:40px;
  height:40px;
  padding:5px;
  position:relative;
}

.ion-android-hand:before {
  content: attr(data-text);
  background-color: rgba(0, 0, 0, 0.8);
  width: 200px;
  left: 0;
  top:calc(100% + 5px);
  height: 20px;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  display: block;
  z-index: 1;
  padding: 10px;
  font-size: 80%;
  font-style: normal;
  position: absolute;
  cursor: pointer;
}
.ion-android-hand{
  visibility: hidden;
  cursor: pointer;
}

.wash-icons:hover .ion-android-hand,
.wash-icons:focus .ion-android-hand{
  visibility: visible;
  cursor: pointer;
}

.ion-android-hand::after {
  content: " ";
  position: absolute;
  top: calc(100% - 5px);
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent rgba(0, 0, 0, 0.8) transparent;
}

<div class="wash-icons">
  <i class="ion-android-hand" data-text="This is Toolip for Android icon"></i>
</div>

如何在HTML图标中添加鼠标悬停工具提示

2 个答案: