CSS對角線鼠標移動填補懸停

Question

我試圖填補按鈕，用鼠標移動對角線效果（使按鍵充滿鼠標的位置）

我有一個對角線填充上懸停效果：

.demo { 
 
    text-align: center; 
 
    margin-top: 150px; 
 
} 
 
.mt { 
 
    margin-top: 20px; 
 
} 
 
.small { 
 
    width: 120px; 
 
} 
 
.medium { 
 
    width: 160px; 
 
} 
 
.large { 
 
    width: 230px; 
 
} 
 
.extra-large { 
 
    width: 360px; 
 
} 
 
.diagonal { 
 
    position: relative; 
 
    display: inline-block; 
 
    line-height: 50px; 
 
    border: 1px solid black; 
 
    color: black; 
 
    background: white; 
 
    font-weight: book; 
 
    font-family: 'Open Sans', sans-serif; 
 
    overflow: hidden; 
 
    z-index: 1; 
 
    padding: 0px; 
 
} 
 
.diagonal:after { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 30; 
 
    left: 0; 
 
    width: 500%; 
 
    height: 1000%; 
 
    background: #F5FF35; 
 
    z-index: -1; 
 
    transform-origin: 0% 0%; 
 
    transform: translateX(calc(-130% - 0px)) translateY(10%) rotate(45deg); 
 
    transition: transform 1s; 
 
} 
 
.diagonal:hover::after { 
 
    transform: translateY(-100%) translateX(-50px) rotate(45deg); 
 
    direction: ltr; 
 
}

<div class="demo"> 
 
    <a class="mt small diagonal">Click me!</a><br> 
 
    <button class="mt medium diagonal">Click me!</button><br> 
 
    <button class="mt large diagonal">Click me!</button><br> 
 
    <button id="demo" class="mt extra-large diagonal">Click me!</button> 
 
</div>

Codepen

但我不能將其設置在鼠標移動，我發現其他問題類似，fiddle。

基本上，我試圖以適應codepen和的jsfiddle一起

我試圖在的jsfiddle旋轉格但填充效果將是各地，而不是僅僅是個開始，再加上它不會覆蓋全區..

Answer 1

你可以嘗試這樣的：

$('.green').on('mousemove', function(e) { 
    if (e.pageX < $(this).width()); 
    var percent = e.pageX - $(this).offset().left * 100/$(this).width(); 
    $(this).css({ 
    'background': 'linear-gradient(45deg, rgba(0,0,0,1) 0%,rgba(0,0,0,1) ' + percent + '%,rgba(0,0,0,0) ' + (percent + 0.1) + '%,rgba(0,0,0,0) 100%)' 
    }); 
}); 

演示：https://jsfiddle.net/sdq5z7ej/4/

Answer 2

您可以通過大多是這樣做調整CSS，基本上旋轉綠色div。

var parent = document.getElementById('parent'); 
 
var child = document.getElementById('child'); 
 
parent.addEventListener("mousemove", fill); 
 
parent.addEventListener("mouseleave", hasLeft); 
 

 
function fill(e) { 
 
    if (e.x <= parent.offsetWidth) { 
 
    child.style.width = e.x + 'px'; 
 
    } 
 
}; 
 

 
function hasLeft(e) { 
 
    if (child.offsetWidth === parent.offsetWidth) { 
 

 
    } else { 
 
    child.style.width = '0px'; 
 
    } 
 
}

.wrapper { 
 
    overflow: hidden; 
 
    height: 60px; 
 
    width: 100px; 
 
    background-color: #FFFF00; 
 
} 
 
#parent { 
 
    height: 65px; 
 
    width: 100px; 
 
    transform: scale(2) rotate(-45deg); 
 
} 
 
#child { 
 
    height: 65px; 
 
    width: 0; 
 
    background-color: #00FF00; 
 
}

<div class="wrapper"> 
 
    <div class='orange' id='parent'> 
 
    <div class='green' id='child'> 
 
    </div> 
 
    </div> 
 
</div>

JSFIDDLE