中心與重要的是懸停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的

回答

相關問題