基本上,

我有一个渐变条,当USP悬停在该条下方时,渐变会移动到具有三角形的该USP上方。现在,我试图弄清楚如何使SVG的中心悬停在USP的中心,以使渐变看起来也具有三角形。下面是一些硬截图和Codepen。

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-->


javascript - 将SVG与div悬停在该div的居中位置-LMLPHP

最佳答案

在这里尝试一下,单击项目以查看喙在移动。它不是生产就绪的代码,但是您可以从这里获取它:)

标记

<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

09-10 10:30
查看更多