Question

我试图用鼠标移动一个带有对角线效果的按钮（所以按钮填充在鼠标所在的位置）

我在悬停时有对角线填充的效果：

＆＃13;

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

＆＃13;

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

＆＃13;

Codepen

但是我无法通过鼠标移动设置它，我发现了一个与其他问题类似的东西，fiddle。

基本上，我正在尝试将codepen和jsfiddle放在一起

我试图在jsfiddle中旋转div但是填充效果将全部结束而不仅仅是开始，而且它不会覆盖整个区域..

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

CSS对角鼠标移动填充悬停

2 个答案: