具有悬停效果的重叠图像

Question

我正在尝试实现一种效果，其中 3 个向上箭头图形相互挤压，当您将鼠标悬停在一个图形上时，箭头会变大，点击后您会转到一个新页面。

我遇到的问题是当箭头重叠时，图像的透明部分会响应悬停。

构建它的最佳方法是什么？我在考虑svg，但是图形太复杂了。

这些箭头中的每一个都是一个单独的图像，悬停时它们会放大。但是重叠部分在图形之间移动时会导致意外行为。

这是我目前所拥有的 link。 http://show.issa.com.php56-33.ord1-1.websitetestlink.com/

Answer 1

您可以 "fake" 它并创建三个透明区域 - 如果您需要精确的箭头形状，甚至可以使用 SVG - 在所有透明区域之上并使用它们进行交互。使用纯 javascript 或 Jquery 很容易实现这一点。

Answer 2

我正在查看并手动添加了内联 border 和 outline，我可以看到颜色非常浅的 dotted 边框，尽管它看起来像一个子元素。

我没有看到任何阴影 DOM。

我没有看到任何其他子元素。

我做看看在 Firefox、Chrome 和 IE11 中什么可以有效地被认为是 border-right。

我确实看到一些长期疯狂的 CSS 应该替换为：

`* {}`

虚线边框是图片的部分！您需要加载图像并非常仔细地放大，但它就在那里！

Answer 3

我明白了。如果有人想知道，我能够将 SVG 与内联图像一起使用。在图像的顶部，我添加了一个多边形，其点与箭头的粗略轮廓相匹配。该多边形添加了一个 svg link，除多边形外的所有内容都具有 pointer-event: none;

任何想要代码的人：

function addPrevClass(e) {
  var target = e.target;
  if (target.getAttribute('points')) { // check if it is svg
    var li = target.parentNode.parentNode.parentNode;
    var prevLi = li.previousElementSibling;
    if (prevLi) {
      prevLi.className = 'prev';
    }
    if (li) {
      li.className = 'current-hover';
    }

    target.addEventListener('mouseout', function() {
      if (prevLi) {
        prevLi.removeAttribute('class');
      }
      if (li) {
        li.removeAttribute('class');
      }
    }, false);
  }
}
if (window.addEventListener) {
  document.getElementById("unleashed").addEventListener('mouseover', addPrevClass, false);
}

#unleashed-container {
  position: absolute;
  text-align: center;
  left: 0;
  right: 0;
  bottom: 80px;
  margin: auto;
  height: 100%;
  z-index: -99;
}
#unleashed-container #unleashed {
  height: 100%;
}
#unleashed-container #unleashed ul {
  height: 100%;
  overflow: hidden;
}
#unleashed-container #unleashed ul li {
  list-style-type: none;
  display: inline-block;
  text-align: center;
  margin: 0;
  height: 100%;
  position: relative;
  width: 14%;
  pointer-events: none;
}
#unleashed-container #unleashed ul li#pink-arrow {
  margin-left: -7.28%;
  margin-right: -7.3346%;
  width: 18.2%;
  z-index: 1;
}
#unleashed-container #unleashed ul li#blue-arrow {
  z-index: 2;
}
#unleashed-container #unleashed ul li#green-arrow {
  z-index: 0;
}
#unleashed-container #unleashed ul li a {
  display: block;
  height: 100%;
  position: relative;
}
#unleashed-container #unleashed ul li a img {
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -moz-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  width: 100%;
  position: absolute;
  bottom: 0;
  right: 0;
}
#unleashed-container #unleashed ul li svg {
  display: block;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -moz-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  width: 100%;
  position: absolute;
  bottom: 0;
  right: 0;
  pointer-events: none;
}
#unleashed-container #unleashed ul li svg image {
  pointer-events: none;
}
#unleashed-container #unleashed ul li svg polygon {
  pointer-events: fill;
}
#unleashed-container #unleashed ul li.current-hover .tooltip {
  display: none;
}
#unleashed-container #unleashed ul li.current-hover img,
#unleashed-container #unleashed ul li.current-hover svg {
  -moz-transform: scale(1.2, 1.2);
  -ms-transform: scale(1.2, 1.2);
  -webkit-transform: scale(1.2, 1.2);
  transform: scale(1.2, 1.2);
}
#unleashed-container #unleashed ul li:hover + li img,
#unleashed-container #unleashed ul li.prev img,
#unleashed-container #unleashed ul li:hover + li svg,
#unleashed-container #unleashed ul li.prev svg {
  -moz-transform: scale(1.05, 1.05);
  -ms-transform: scale(1.05, 1.05);
  -webkit-transform: scale(1.05, 1.05);
  transform: scale(1.05, 1.05);
}

<div id="unleashed-container">
  <div id="unleashed">
    <ul>
      <li id="blue-arrow">
        <svg class="arrow" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 875.67 1418">
          <image width="850" height="1412" xlink:href="http://show.issa.com.php56-33.ord1-1.websitetestlink.com/wp-content/themes/issa2016/images/blue-arrow.png"></image>
          <a xlink:href="http://show.issa.com.php56-33.ord1-1.websitetestlink.com/attend/">
            <polygon points="0.5 550.19 0.5 575.71 170.5 575.71 173.96 1417.5 705.17 1417.5 705.17 584.78 875.17 584.78 875.17 559.27 453.17 0.5 423.17 0.5 0.5 550.19" opacity="0" style="fill: #333"></polygon>
          </a>
        </svg>
      </li>
      <li id="pink-arrow">
        <svg class="arrow" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 850 1648">
          <image width="850" height="1648" xlink:href="http://show.issa.com.php56-33.ord1-1.websitetestlink.com/wp-content/themes/issa2016/images/pink-arrow.png"></image>
          <a xlink:href="http://show.issa.com.php56-33.ord1-1.websitetestlink.com/attend/">
            <polygon points="425 0 0 554.78 172.79 554.78 172.79 1648 673.84 1648 673.84 560.78 850 560.78 425 0" opacity="0" style="fill: #333"></polygon>
          </a>
        </svg>
      </li>
      <li id="green-arrow">
        <svg class="arrow" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 875.67 1418">
          <image width="850" height="1412" xlink:href="http://show.issa.com.php56-33.ord1-1.websitetestlink.com/wp-content/themes/issa2016/images/green-arrow.png"></image>
          <a xlink:href="http://show.issa.com.php56-33.ord1-1.websitetestlink.com/attend/">
            <polygon points="0.5 550.19 0.5 575.71 170.5 575.71 173.96 1417.5 705.17 1417.5 705.17 584.78 875.17 584.78 875.17 559.27 453.17 0.5 423.17 0.5 0.5 550.19" opacity="0" style="fill: #333"></polygon>
          </a>
        </svg>
      </li>
    </ul>
  </div>
</div>

具有悬停效果的重叠图像

Overlapping images with hover effects

html

javascript

css

svg

css-shapes