时间戳

首页 > 解决方案 > 如何剪辑图像及其“工具提示”？

html - 如何剪辑图像及其“工具提示”？

问题描述

这是我想要达到的结果。 一个有讲话泡泡的女人的卡通形象

当您将鼠标悬停在女人的卡通上时，应该会弹出对话框。当您将鼠标悬停在对话气泡中的“我”一词上时，光标会变为一个问号，表示它是一个链接。我有两个相关的问题。首先，我想剪辑卡通图像，使对话气泡仅在光标位于实际图像上时出现，而不仅仅是在它超过其包含 div 的阈值时出现。但是，如果我在卡通片上使用多边形剪辑路径，它也会剪掉卡通片边界之外的任何对话气泡部分。其次，我希望仅当您将鼠标悬停在卡通上时才会出现对话泡泡，而不是当您将鼠标悬停在泡泡本身占据的空间上时。我可以通过指定类似“janes-bubble:hover {visibility: hidden;}”的内容来实现这一点。这将防止气泡在悬停时弹出。问题是当我将光标滑离卡通时它也会隐藏，这意味着我无法访问“我”链接。所以，除非卡通悬停，否则我需要它不会弹出，但一旦卡通悬停就保持原位，以便可以点击链接。

这是我的代码。

* {
  margin: 0;
  padding: 0;
}

.content {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #c5f5f0;
}

.janes-face {
  position: relative;
    background: transparent url(https://sodyot.com/wp-content/uploads/2021/07/portrait-jane.png) no-repeat center center;
  background-size: 100%;
    width: 350px;
    height: 335px;
  margin-top: 70px;
}

.janes-face:hover {
  cursor: pointer;
}

.janes-line {
    position: absolute;
  /*width; 200px;
  height: 100px;*/
  background: transparent url(https://sodyot.com/wp-content/uploads/2021/07/speech-bubble-round-r-e1627134718615.png) no-repeat top center;
  font-family: 'Kalam', cursive;
  left: -90%;
    margin-top: -23%;
    padding: 23% 34% 24% 26%;
    color: #0e324c;
    font-size: 18pt;
    font-weight: lighter;
    line-height: 1.2em;
    text-align: center;
    white-space: nowrap;
    opacity: 0;
    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -ms-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
    }

.janes-line a {
  color: #fff;
    text-decoration: none;
    cursor: help;
    display: inline-block;
    background-color: #f9745a;
    padding: 0 5px; 
}

.janes-face:hover .janes-line {
  opacity: 1;
}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kalam:wght@300&display=swap" rel="stylesheet">

<div class="content">
  <div class="janes-face">
            <div class="janes-line">"Find out more about <a href="#">  me  </a>."</div><!--end janes-line-->
        </div><!--end janes-face-->
</div>

如果没有脚本，这可能是不可行的，这很好，但实际上我有 7 个位置略有不同。对任何解决方案持开放态度。

标签： htmlcss

解决方案

问题是找到一种方法，使语音气泡在悬停时完整显示，同时仅悬停在脸上，而不是在其容器上。

如前所述，这可能是实用的，因为用户可能不会注意到细微的差异（一旦悬停在脸上就能够继续悬停在脸上）是由剪辑路径定义的脸在问题中，但在悬停时删除该剪辑路径。

这个片段只是使用了一个简单的菱形剪辑路径，并且元素的背景已经变成了红色，以便您可以看到它。显然，您需要在卡通周围添加自己更详细的剪辑路径。

否则所需要做的就是在悬停时删除剪辑路径。

* {
  margin: 0;
  padding: 0;
}

.content {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #c5f5f0;
}

.janes-face {
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  position: relative;
    background: url(https://sodyot.com/wp-content/uploads/2021/07/portrait-jane.png) no-repeat center center;
  background-color: red;
  background-size: 100%;
    width: 350px;
    height: 335px;
  margin-top: 70px;
}

.janes-face:hover {
  cursor: pointer;
  clip-path: none;
}

.janes-line {
    position: absolute;
  /*width; 200px;
  height: 100px;*/
  background: transparent url(https://sodyot.com/wp-content/uploads/2021/07/speech-bubble-round-r-e1627134718615.png) no-repeat top center;
  font-family: 'Kalam', cursive;
  left: -90%;
    margin-top: -23%;
    padding: 23% 34% 24% 26%;
    color: #0e324c;
    font-size: 18pt;
    font-weight: lighter;
    line-height: 1.2em;
    text-align: center;
    white-space: nowrap;
    opacity: 0;
    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -ms-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
    }

.janes-line a {
  color: #fff;
    text-decoration: none;
    cursor: help;
    display: inline-block;
    background-color: #f9745a;
    padding: 0 5px; 
}

.janes-face:hover .janes-line {
  opacity: 1;
}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kalam:wght@300&display=swap" rel="stylesheet">

<div class="content">
  <div class="janes-face">
            <div class="janes-line">"Find out more about <a href="#">  me  </a>."</div><!--end janes-line-->
        </div><!--end janes-face-->
</div>

推荐阅读