javascript - 将带有 div 的 SVG 悬停在该 div 上

Question

基本上，

我有一个渐变条，当 USP 悬停在条下方时，渐变移动到带有三 Angular 形的 USP 上方。现在我想弄清楚如何在悬停时让 SVG 的中心在 USP 内部居中，以使渐变看起来也有一个三 Angular 形。下面是一个有点硬的屏幕截图和代码笔。

http://codepen.io/nsmed/pen/MpOLpp?editors=1100

    <section class="small-business-split-header-block">
  <div class="wrapper">
      <h1 class="small-business-header">Your calls<br />answered brilliantly</h1>
      <p class="small-business-sub-header">Our small business services ensure you capture every opportunity and make your business look bigger. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet semper ante. Ut vel odio.</p>
  </div><!--wrapper-->

    <div class="usp-bar">
        <p class="usp-one active">Telephone Answering</p>

        <span><img src="http://svgshare.com/i/y4.svg" /></span>
    </div><!--usp-bar-->
    </section>

    <div class="usp-list cf">
    <div class="usp active">
        <a href="#">
            <p>Need your own<br /><strong>dedicated PA?</strong></p>
        </a>
    </div><!--usp-->

    <div class="usp">
        <a href="#">
            <p>Looking for<br />an auto attendent?</p>
        </a>
    </div><!--usp-->


    <div class="usp">
        <a href="#">
            <p>Missing calls<br />on your mobile?</p>
        </a>
    </div><!--usp-->


    <div class="usp">
        <a href="#">
            <p>Looking for a<br />business number?</p>
        </a>
    </div><!--usp-->

</div><!--usp-list-->

Answer 1

在这里试试这个，点击元素看喙移动。这不是生产就绪代码，但您可以从这里获取它:)

标记

<div class="bar">

  <div class="bar-background">
    <div class="bar-slider"></div>
  </div>
</div>
<ul class="menu">
  <li class="menu-items">Item 1</li>
  <li class="menu-items">Item 2</li>
  <li class="menu-items">Item 3</li>
  <li class="menu-items">Item 4</li>
</ul>

SCSS

$bar-height: 6rem;
$bar-slider-height: 2rem;
$bar-slider-background: #ffffff;
* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  padding: 0;
  margin: 0;
}

.bar {
  position: relative;
}

.bar-background {
  background: -webkit-linear-gradient(
      left, 
      rgba(0, 175, 169, 1) 30%, 
      rgba(1, 180, 172, 0.15) 60%);
  height: $bar-height;
  overflow: hidden;
  width: 100%;
}

.bar-slider {
  height: $bar-slider-height;
  margin-top: $bar-height - $bar-slider-height;
  display: flex;
  width: 200vw;
  transition: transform 1s linear;
  &:before,
  &:after {
    content: "";
    width: 100vw;
    display: block;
    background: $bar-slider-background;
    height: $bar-slider-height;
  }
  &:before {
    transform: skew(45deg) translateX(-50%);
  }
  &:after {
    transform: skew(-45deg)  translateX(-50%);
  }
}

.menu {
    height: 2rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.menu-items {
  list-style: none;
}

JS

var slider = $('.bar-slider'),
  sliderCenter = parseInt(slider.width() / 4, 10); // taking 1/4 here because our slider is twice the width of viewPort

$('.menu-items').on('click', function() {
  var activeClassName = 'is-active';
  $(this)
    .addClass(activeClassName)
    .siblings()
    .removeClass(activeClassName);

  var activeItem = $('.' + activeClassName),
    activeItemPositonFromLeft = activeItem.position().left,
    activeItemCenter = parseInt(activeItem.width() / 2, 10),
    newPos = parseInt(activeItemPositonFromLeft - sliderCenter + activeItemCenter, 10),
    translateX = 'translateX(' + newPos + 'px)';
  slider.css({
    transform: translateX
  });
});

http://codepen.io/robiosahan/pen/gmopRJ