Question

嗨！我只是想知道这里是否有人知道如何制作这样的悬停效果，可以用于这样的双选项按钮或导航栏等。

我有css和html代码，但我不知道如何使效果有效。另外，我想知道如果不使用Jquery是否可行？

＆＃13;

body {
     background-size: 100%;
     margin: 0px;
     background-color: gray;
}
 .joinVideoCallButton-2Pohj0 {
     -ms-flex-align: center;
     -ms-flex-pack: center;
     -webkit-box-align: center;
     -webkit-box-pack: center;
     -webkit-box-sizing: border-box;
     align-items: center;
     background-color: #43b581;
     border-radius: 3px;
     box-sizing: border-box;
     cursor: pointer;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     height: 36px;
     justify-content: center;
     overflow: hidden;
     padding: 0 14px;
     position: relative;
}
 .joinVideoCallButton-2Pohj0 .underlay-1LCk7B {
     -webkit-transition: opacity .1s ease;
     background-color: #69c49a;
     border-radius: 3px;
     bottom: 0;
     left: 0;
     margin: 2px;
     position: absolute;
     top: 0;
     transition: opacity .1s ease;
     width: 50%;
     flex: 1 1 auto;
}
 .joinVideoCallButton-2Pohj0 .inner-1e8n63 {
     cursor: pointer;
     z-index: 1;
     flex: 1 1 auto;
}
 .flex-lFgbSz:first-child, .horizontal-2BEEBe>.flexChild-1KGW5q:first-child {
     margin-left: 0;
}
 .flex-lFgbSz, .horizontal-2BEEBe>.flexChild-1KGW5q {
     margin-left: 10px;
     margin-right: 10px;
}
 .joinVideoCallButton-2Pohj0 .callDivider-_hMb9n {
     background-color: #69c49a;
     height: 20px;
     margin: 0 2px;
     opacity: .6;
     width: 2px;
}
 .joinVideoCallButton-2Pohj0 .icon-3tOP24 {
     height: 16px;
     width: 16px;
}
 .joinVideoCallButton-2Pohj0 .buttonText-1b8lyZ {
     color: #f6f6f7;
     font-size: 14px;
     margin-left: 8px;
     margin-right: 8px;
     text-transform: uppercase;
}
 .wrapper-1XTKlU{
    background-size:cover;
    min-height:100vh;
    overflow:hidden
}
.flexWrapper-1ztpWj{
    height:100vh
}
.flex-3B1Tl4{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex
}
.alignStart-pnSyE6{
    -ms-flex-align:start;
    -webkit-box-align:start;
    align-items:flex-start
}
.alignEnd-3PVyen{
    -ms-flex-align:end;
    -webkit-box-align:end;
    align-items:flex-end
}
.alignCenter-3VxkQP{
    -ms-flex-align:center;
    -webkit-box-align:center;
    align-items:center
}
.alignStretch-1hwxMa{
    -ms-flex-align:stretch;
    -webkit-box-align:stretch;
    align-items:stretch
}
.alignBaseline-4enZzv{
    -ms-flex-align:baseline;
    -webkit-box-align:baseline;
    align-items:baseline
}
.justifyStart-2yIZo0{
    -ms-flex-pack:start;
    -webkit-box-pack:start;
    justify-content:flex-start
}
.justifyEnd-1ceqOU{
    -ms-flex-pack:end;
    -webkit-box-pack:end;
    justify-content:flex-end
}
.justifyCenter-29N31w{
    -ms-flex-pack:center;
    -webkit-box-pack:center;
    justify-content:center
}
.justifyBetween-1d1Hto{
    -ms-flex-pack:justify;
    -webkit-box-pack:justify;
    justify-content:space-between
}
.horizontal-2VE-Fw>.spacer-2Aeq3k,.horizontalReverse-k5PqxT>.spacer-2Aeq3k,.vertical-3X17r5>.spacer-2Aeq3k{
    min-height:1px
}
.horizontal-2BEEBe>.flex-lFgbSz,.horizontal-2BEEBe>.flexChild-1KGW5q{
    margin-left:10px;
    margin-right:10px
}
.horizontal-2BEEBe>.flex-lFgbSz:first-child,.horizontal-2BEEBe>.flexChild-1KGW5q:first-child{
    margin-left:0
}
.horizontal-2BEEBe>.flex-lFgbSz:last-child,.horizontal-2BEEBe>.flexChild-1KGW5q:last-child{
    margin-right:0
}

＆＃13;

<div class="flex-lFgbSz flex-3B1Tl4 horizontal-2BEEBe horizontal-2VE-Fw flex-3B1Tl4 directionRow-yNbSvJ justifyCenter-29N31w alignStretch-1hwxMa noWrap-v6g9vO private-channel-call-actions" style="">
    <div class="joinVideoCallButton-2Pohj0">
        <div class="underlay-1LCk7B" style="opacity: 1; transform: translateX(31.5781px);"></div>
        <div class="flex-lFgbSz flex-3B1Tl4 horizontal-2BEEBe horizontal-2VE-Fw flex-3B1Tl4 directionRow-yNbSvJ justifyCenter-29N31w alignCenter-3VxkQP noWrap-v6g9vO inner-1e8n63" style="flex: 1 1 auto;">
            <div class="flex-lFgbSz flex-3B1Tl4 horizontal-2BEEBe horizontal-2VE-Fw flex-3B1Tl4 directionRow-yNbSvJ justifyCenter-29N31w alignCenter-3VxkQP noWrap-v6g9vO callButton-205P-D" style="flex: 1 1 auto;"><img class="icon-3tOP24" src="http://discordapp.com/assets/0682cf612d4fed39efb57e0a1bcc8544.svg">
                <div class="buttonText-1b8lyZ">Video</div>
            </div>
            <div class="callDivider-_hMb9n"></div>
            <div class="flex-lFgbSz flex-3B1Tl4 horizontal-2BEEBe horizontal-2VE-Fw flex-3B1Tl4 directionRow-yNbSvJ justifyCenter-29N31w alignCenter-3VxkQP noWrap-v6g9vO callButton-205P-D" style="flex: 1 1 auto;">
                <div class="buttonText-1b8lyZ">Voice</div><img class="icon-3tOP24" src="http://discordapp.com/assets/8b47456a037cc496c55ae8f871274018.svg"></div>
        </div>
    </div>
</div>

＆＃13;

Answer 1

第1部分

这个想法很简单：你需要在按钮行中添加一个额外的“悬停框”元素，绝对定位它，最后只需根据光标的位置改变对象的左边值：

function relocateHoverBox(e) {
  
  // Get all the needed values
  // (idealy don't use as many variables)
  let hoverBoxEl = e.target.closest(".btn-row").querySelector(".btn-row--hover-box");
  let hoverBoxHalfWidth = hoverBoxEl.clientWidth / 2;
  let containerX = e.target.closest(".btn-row").getBoundingClientRect().left;
  let maxLeft = e.target.closest(".btn-row").clientWidth - hoverBoxEl.clientWidth;
  let newLeftValue = e.pageX - containerX - hoverBoxHalfWidth;
  
  // Apply new left value accordingly
  if (newLeftValue >= 0) {
    if (newLeftValue > maxLeft) {
      hoverBoxEl.style.left = maxLeft + "px";
    }
    else {
      hoverBoxEl.style.left = e.pageX - containerX - hoverBoxHalfWidth + "px";
    }
  }
  else {
    hoverBoxEl.style.left = 0 + "px";
  }  
}

// Set the hover box in the right position as soon as the mouse enters
const mouseoverHandler = function(e) {
  relocateHoverBox(e);
}

// Update the hover box position
const mousemoveHandler = function(e) {
  relocateHoverBox(e);
}

// Reset the hover box position
const mouseleaveHandler = function(e) {
  e.target.closest(".btn-row").querySelector(".btn-row--hover-box").style.left = "";
}

document.getElementsByClassName("btn-row")[0].addEventListener('mousemove', mousemoveHandler);
document.getElementsByClassName("btn-row")[0].addEventListener('mouseenter', mouseoverHandler);
document.getElementsByClassName("btn-row")[0].addEventListener('mouseleave', mouseleaveHandler);

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #202225;
}

.btn-row {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  height: 48px;
  background: #43b581;
  position: relative;
}
.btn-row--hover-box {
  width: 50%;
  height: 44px;
  border-radius: 2px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.btn-row--hover-box:hover {
  background: rgba(255, 255, 255, 0.25);
}

.btn {
  background: transparent;
  letter-spacing: .1rem;
  padding: 0 1rem;
  border: 0;
  color: #fff;
  height: 28px;
  display: block;
  font-weight: bold;
  text-transform: uppercase;
}

<div class="btn-row">
  <div class="btn-row--hover-box"></div>
  <button class="btn">Option 1</button>
  <button class="btn">Option 2</button>
</div>

第2部分

另外，我想知道如果不使用Jquery就可以了吗？

如果通过“Jquery”实际上是指 jQuery库，那么请记住它是库，这意味着它只是一个有用的脚本集合在编程语言中，那么因为你可以使用该语言编写自己的脚本，可以在没有jQuery的情况下完成

如果“Jquery”是指 Javascript （编写jQuery的语言），那么就不可能它，因为你需要它遵循光标的x坐标。

如何在Discord中创建像JoinVideoCallButton这样的按钮？

1 个答案:

第1部分

第2部分