Question

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

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

构建它的最佳方法是什么？我正在考虑使用svg，但图形非常复杂。

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

这是我到目前为止的链接。 http://show.issa.com.php56-33.ord1-1.websitetestlink.com/

Answer 1

我明白了。任何人都想知道，我能够使用内嵌图像的SVG。在图像的顶部，我添加了一个多边形，其点与箭头的粗略轮廓相匹配。该多边形添加了一个svg链接，除了多边形之外的所有内容都有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>

Answer 2

你可以“伪造”它并创建三个透明区域 - 如果你需要精确的箭头形状，甚至可以创建SVG - 最重要的是用它们进行交互。使用纯javascript或Jquery可以轻松实现这一点。

Answer 3

我正在查看此内容并手动添加了内嵌border和outline，我可以看到非常浅的dotted边框，虽然它看起来像是一个子元素。

我没有看到任何影子DOM。

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

我做看看在Firefox，Chrome和IE11中有效被视为border-right的内容。

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

`* {}`

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

悬停效果重叠图像

3 个答案: