Question

我在这个fiddle中有一个带灰色滤镜的图像，正如你在悬停动作中看到的我删除过滤器，我想知道如何在过滤器处于活动状态时在图像中间添加一个简单文本，然后像过滤器一样移除悬停..像“悬停图像看到我们的办公室”，它可以与CSS？或者我们需要js？

.tooltip {
  position: absolute;
  z-index: 9999;
  border: 1px solid black;
  min-width: 100px;
  max-width: 150px;
  background: white;
  border-bottom: 1px dotted black;
  pointer-events: none;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
}

area {
  position: relative;
}

.parent {
  position: relative;
}

.profile-pic {
  width: 100%;
  height: auto;
  /* border-radius: 50%; */
  box-shadow: #222 0.2em 0.2em 1em;
  -webkit-filter: grayscale(100%) brightness(135%) contrast(120%);
  filter: grayscale(100%) brightness(135%) contrast(120%);
  transition: filter 0.3s, box-shadow 0.3s;
  -webkit-transition: filter 0.3s, -webkit-filter 0.3s, box-shadow 0.3s;
}

.profile-pic:hover,
.profile-pic:focus {
  -webkit-filter: none;
  filter: none;
  box-shadow: #224 0.2em 0.2em 0.6em 0.1em;
}

<div class="parent">
  <img id="mapImage" src="https://i.imgur.com/Y7HuHDQ.png" usemap="#image-map" class="profile-pic">

  <map name="image-map">
    
<area target="" data-text="USA Shops: Manchester,TN - Num: 6621418372 WIXOM ,MI - Num:662728173" alt="USA" title="USA" href="" coords="110,140,182,141,186,148,198,146,198,140,214,139,224,134,234,143,221,150,213,154,205,156,205,170,199,174,194,181,193,188,162,182,158,171,149,173,145,179,141,170,124,168,121,173,112,168,105,158" shape="poly">
                
<area target="" data-text="Mexico Shops: Manchester,TN - Num: 6621418372 WIXOM ,MI - Num:662728173"  alt="MEXICO" title="MEXICO" href="" coords="124,172,137,171,141,178,152,173,160,181,162,204,179,199,179,211,157,212,173,216,146,204,136,196,125,188" shape="poly">
                 
<area target="" data-text="Japan Shops: Manchester,TN - Num: 6621418372 WIXOM ,MI - Num:662728173"  alt="JAPAN" title="JAPAN" href="" coords="705,106,716,106,721,146,687,184,667,175" shape="poly">
                 
<area target="" data-text="Germany Shops: Manchester,TN - Num: 6621418372 WIXOM ,MI - Num:662728173"  alt="GERMANY" title="GERMANY" href="" coords="418,111,436,108,433,124,418,124" shape="poly">
<div class="tooltip" id="tooltip"></div>   
</map>

</div>

Answer 1

如果您将CSS更改为此，则当您将鼠标悬停在地图上时，它会删除标签。

.tooltip {
  position: absolute;
  z-index: 9999;
  border: 1px solid black;
  min-width: 100px;
  max-width: 150px;
  background: white;
  border-bottom: 1px dotted black;
  pointer-events: none;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  transition: .2s all;
  opacity: 1;
}

area {
  position: relative;
}

.parent {
  position: relative;
}

.profile-pic {
  width: 100%;
  height: auto;
  /* border-radius: 50%; */
  box-shadow: #222 0.2em 0.2em 1em;
  -webkit-filter: grayscale(100%) brightness(135%) contrast(120%);
  filter: grayscale(100%) brightness(135%) contrast(120%);
  transition: filter 0.3s, box-shadow 0.3s;
  -webkit-transition: filter 0.3s, -webkit-filter 0.3s, box-shadow 0.3s;
}

.profile-pic:hover,
.profile-pic:focus {
  -webkit-filter: none;
  filter: none;
  box-shadow: #224 0.2em 0.2em 0.6em 0.1em;
}

.profile-pic:hover ~ map > .tooltip,
.profile-pic:focus ~ map > .tooltip{
opacity: 0;
}

Answer 2

这是你想要实现的目标吗？

＆＃13;

$(".profile-pic").mouseover(function(){
    $("p").hide();
});

$(".profile-pic").mouseout(function(){
    $("p").show();
});

＆＃13;

.tooltip {
  position: absolute;
  z-index: 9999;
  border: 1px solid black;
  min-width: 100px;
  max-width: 150px;
  color: white;
  border-bottom: 1px dotted black;
  pointer-events: none;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  top:20%;
  left:40%;
}

area {
  position: relative;
}

.parent {
  position: relative;
}

.profile-pic {
  width: 100%;
  height: auto;
  /* border-radius: 50%; */
  box-shadow: #222 0.2em 0.2em 1em;
  -webkit-filter: grayscale(100%) brightness(135%) contrast(120%);
  filter: grayscale(100%) brightness(135%) contrast(120%);
  transition: filter 0.3s, box-shadow 0.3s;
  -webkit-transition: filter 0.3s, -webkit-filter 0.3s, box-shadow 0.3s;
}

.profile-pic:hover,
.profile-pic:focus {
  -webkit-filter: none;
  filter: none;
  box-shadow: #224 0.2em 0.2em 0.6em 0.1em;
}

＆＃13;

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<div class="parent">
<p class="tooltip">Hello</p>
  <img id="mapImage" src="https://i.imgur.com/Y7HuHDQ.png" usemap="#image-map" class="profile-pic">

  <map name="image-map">

            <area target="" data-text="USA Shops: Manchester,TN - Num: 6621418372 WIXOM ,MI - Num:662728173" alt="USA" title="USA" href="" coords="110,140,182,141,186,148,198,146,198,140,214,139,224,134,234,143,221,150,213,154,205,156,205,170,199,174,194,181,193,188,162,182,158,171,149,173,145,179,141,170,124,168,121,173,112,168,105,158" shape="poly">

             <area target="" data-text="Mexico Shops: Manchester,TN - Num: 6621418372 WIXOM ,MI - Num:662728173"  alt="MEXICO" title="MEXICO" href="" coords="124,172,137,171,141,178,152,173,160,181,162,204,179,199,179,211,157,212,173,216,146,204,136,196,125,188" shape="poly">

             <area target="" data-text="Japan Shops: Manchester,TN - Num: 6621418372 WIXOM ,MI - Num:662728173"  alt="JAPAN" title="JAPAN" href="" coords="705,106,716,106,721,146,687,184,667,175" shape="poly">

             <area target="" data-text="Germany Shops: Manchester,TN - Num: 6621418372 WIXOM ,MI - Num:662728173"  alt="GERMANY" title="GERMANY" href="" coords="418,111,436,108,433,124,418,124" shape="poly">
          <!--<div class="tooltip" id="tooltip"></div>-->   
    </map>

</div>

＆＃13;

在悬停之前在图像中间写入文本

2 个答案: