Javascript 如何根据输入值悬停按钮？_Javascript_Html_Css

Javascript 如何根据输入值悬停按钮？

javascript html css

Javascript 如何根据输入值悬停按钮？,javascript,html,css,Javascript,Html,Css,我试图让它，你把两种颜色的输入和按钮，甚至在按下之前是这些颜色的梯度 <!doctype html> <html> <head> <script src='color.js'> </script> <link href= 'color.css' rel='stylesheet'> </head> <body> <input type='text' value=''

我试图让它，你把两种颜色的输入和按钮，甚至在按下之前是这些颜色的梯度

<!doctype html>
 <html>
  <head>
  <script src='color.js'> </script>
  <link href= 'color.css' rel='stylesheet'>
  </head>
  <body>
    <input type='text' value='' id='left' class='input2'/>
    <input type='text' value='' id='right' class='input1'/>
    <button type="button" onclick="color()" class='but:hover'>
     Make Gradient
    </button>
  </body>
 </html>

 function color(){
    let grade = document.getElementById('left').value;
    if (grade == ''){
        grade = 'white'
    }
    let gradetwo = document.getElementById('right').value;
    if (gradetwo == ''){
        gradetwo = 'white'
    }
    document.body.style.background = "linear-gradient(to right," + grade + "," + gradetwo + ")";
    document.body.style.but:hover.background = "linear-gradient(to right," + grade + "," + gradetwo + ")";
}

  .but:hover{
    border-radius: 12px;
    width: 250px;
    height: 60px;
    position: absolute;
    left: 550px;
    top: 225px; 
 }


作梯度
函数颜色（）{
让grade=document.getElementById（'left'）.value；
如果（等级=“”）{
等级=‘白色’
}
设gradetwo=document.getElementById（'right'）.value；
如果（二级=“”）{
二年级=‘白色’
}
document.body.style.background=“线性渐变（向右，“+grade+”，“+gradetwo+”）；
document.body.style.but:hover.background=“线性渐变（向右，“+grade+”，“+gradetwo+”）；
}
.但是：悬停{
边界半径：12px；
宽度：250px；
高度：60px；
位置：绝对位置；
左：550px；
顶部：225px；
}

我以为我也可以做同样的事情，只是做一个背景渐变，但我做不到：在javascript中悬停。

试试下面的代码。。太多的变化。。但是如果你需要解释的话，请告诉我。谢谢

函数颜色（）{
让grade=document.getElementById（'left'）.value；
如果（等级=“”）{
等级=‘白色’
}
设gradetwo=document.getElementById（'right'）.value；
如果（二级=“”）{
二年级=‘白色’
}
//document.body.style.background=“线性渐变（向右，“+grade+”，“+gradetwo+”）；
//document.body.style.but:hover.background=“线性渐变（向右，“+grade+”，“+gradetwo+”）；
var css=“.but:悬停{背景：线性渐变（向右，“+grade+”，“+gradetwo+”）}”；
var style=document.createElement（'style'）；
if（style.styleSheet）{
style.styleSheet.cssText=css；
}否则{
appendChild（document.createTextNode（css））；
}
document.getElementsByTagName（'head'）[0].appendChild（样式）；
}


作梯度

只需使用css变量：

const btOver=document.getElementById（'bt-over'））
，btLeft=document.getElementById（'bt-left'）
，btRight=document.getElementById（'bt-right'）
;
btLeft.oninput=\u=>btOver.style.setProperty（'--cLeft'，btLeft.value）
btRight.oninput=\u=>btOver.style.setProperty（'--cRight'，btRight.value）

#bt结束{
--裂缝：#FFFFFF；
--克里特：#FFFFFF；
}
#英国电信：悬停{
背景：线性梯度（向右，var（--cLeft），var（--cRight））
}


按钮显示悬停时的渐变

您可以在Javascript中使用

onMouseOver

事件，它与悬停非常相似。我不确定您想要实现什么。如果您想在修改两个输入字段中任何一个的内容后更改按钮颜色，可以在文本字段上使用

onchange

事件。您的代码显示了我想要的内容，但当我尝试将其合并到代码中时，它不起作用。很抱歉，我没有详细说明问题。写下了代码，但它不起作用，所以我检查了开发人员工具，看看问题出在哪里。它在JavaScript中左侧按钮的eventlistener下有一条红线，表示“无法将属性'oninput'设置为null”。@BPF我想原因是我的html代码与您的html代码在所有html按钮/输入上都不同。如果您已经将JS代码正确地放在

的末尾，那么我将脚本切换为“延迟”，现在它可以完美地工作了。非常感谢你的帮助。