中心与重要的是悬停DIV一个SVG div的

我有栏下方的梯度棒和上的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-->

来源

2017-03-17 nSmed

要使换句话说，你是试图使三角形匹配“电话应答”div的梯度？所以他们看起来像是一样的形状？ –

是的，这是一个更好的解释方法 – nSmed

你解决了吗？ –

这里试试这个，点击物品看到喙移动。这不是一个生产就绪代码，但你可以把它从这里:)

标记

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

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

来源

2017-03-17 23:19:04 osahan

中心与重要的是悬停DIV一个SVG div的

回答

相关问题