Fatal编程技术网
  • javascript/
  • Javascript 有没有办法选择具有悬停效果的取消选择多个按钮？

Javascript 有没有办法选择具有悬停效果的取消选择多个按钮？

javascript html css

Javascript 有没有办法选择具有悬停效果的取消选择多个按钮？,javascript,html,css,Javascript,Html,Css,我正在用HTML、CSS和javascript制作一种聊天机器人，网站在这里> 如果单击菜单按钮，您将找到一个页面来更改背景，目前为止，将鼠标悬停在27个不同的按钮上会在按钮内部创建一个有点透明的边框。我试图制作一个点击效果，使点击按钮的边框更暗（alpha值更高）。我遇到的问题是，当你点击按钮时，我清除了其他边界。例如：如果（单击按钮1）{边框：按钮1,2,3无…} 但当我尝试这样做时，悬停效果不再起作用，因为它永久性地清除了按钮的边界 我是来寻求解决方案的建议的 以下是现有代码： index

我正在用HTML、CSS和javascript制作一种聊天机器人，网站在这里>

如果单击菜单按钮，您将找到一个页面来更改背景，目前为止，将鼠标悬停在27个不同的按钮上会在按钮内部创建一个有点透明的边框。我试图制作一个点击效果，使点击按钮的边框更暗（alpha值更高）。我遇到的问题是，当你点击按钮时，我清除了其他边界。例如：如果（单击按钮1）{边框：按钮1,2,3无…}

但当我尝试这样做时，悬停效果不再起作用，因为它永久性地清除了按钮的边界

我是来寻求解决方案的建议的

以下是现有代码：

index.html：

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>CHAT!!</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
    <script src="script.js" defer>
 
    </script>
    <div class="chatBoxContainer" id="chatBoxContainer" style="">
 
    </div>
    <div class="entryMessage">
        <div class="container">
            <div class="inputBg" id="inputBg"></div>
            <input type="text" placeholder="Type a message" autocomplete="off" class="inputMessage" id="inputMessage" onkeypress="return demoForEnterKey(event)" style="font-size: 16px;" onclick="this.style.color='white';"></input> 
    </div>
  </div>
  <button class="menuButton" id="menuButton" style= "cursor:pointer" onclick="menuClick()">
    <img src="menu.png" class="menuButtonImage"></img>
  </button>
  <div class="newScreen" id="newScreen">
    <div class="colorSelectorTitle">
      <div>
        <div class="backText">Set Chat Wallpaper</div>
        <button class="backButton" style="background-color: transparent; border-style: none; cursor: pointer;" onclick="bringBack()">
          <img src="back-arrow.png" class="backArrowImg"></img>
        </button>
      </div>
    </div>
    <div class="backgroundChooserContainer">
      <div class="backgroundSelector">
        <button class="_3sW34" id="clr1" style="background-color: rgb(5, 5, 5);">
          <span class="defaultText">Default</span>
        </button>
        <button class="_3sW34" style="background-color: rgb(15, 36, 36);" id="clr2"></button>
        <button class="_3sW34" style="background-color: rgb(18, 38, 31);" id="clr3"></button>
        <button class="_3sW34" style="background-color: rgb(17, 36, 28);" id="clr4"></button>
        <button class="_3sW34" style="background-color: rgb(17, 30, 39);" id="clr5"></button>
        <button class="_3sW34" style="background-color: rgb(15, 34, 36);" id="clr6"></button>
        <button class="_3sW34" style="background-color: rgb(31, 29, 37);" id="clr7"></button>
        <button class="_3sW34" style="background-color: rgb(33, 33, 33);" id="clr8"></button>
        <button class="_3sW34" style="background-color: rgb(31, 33, 28);" id="clr9"></button>
        <button class="_3sW34" style="background-color: rgb(35, 35, 27);" id="clr10"></button>
        <button class="_3sW34" style="background-color: rgb(38, 36, 25);" id="clr11"></button>
        <button class="_3sW34" style="background-color: rgb(38, 31, 23);" id="clr12"></button>
        <button class="_3sW34" style="background-color: rgb(38, 23, 23);" id="clr13"></button>
        <button class="_3sW34" style="background-color: rgb(38, 15, 16);" id="clr14"></button>
        <button class="_3sW34" style="background-color: rgb(38, 10, 16);" id="clr15"></button>
        <button class="_3sW34" style="background-color: rgb(25, 5, 11);" id="clr16"></button>
        <button class="_3sW34" style="background-color: rgb(33, 16, 12);" id="clr17"></button>
        <button class="_3sW34" style="background-color: rgb(15, 12, 12);" id="clr18"></button>
        <button class="_3sW34" style="background-color: rgb(16, 25, 25);" id="clr19"></button>
        <button class="_3sW34" style="background-color: rgb(10, 29, 37);" id="clr20"></button>
        <button class="_3sW34" style="background-color: rgb(13, 21, 35);" id="clr21"></button>
        <button class="_3sW34" style="background-color: rgb(13, 15, 17);" id="clr22"></button>
        <button class="_3sW34" style="background-color: rgb(10, 12, 13);" id="clr23"></button>
        <button class="_3sW34" style="background-color: rgb(17, 11, 18);" id="clr24"></button>
        <button class="_3sW34" style="background-color: rgb(30, 31, 31);" id="clr25"></button>
        <button class="_3sW34" style="background-color: rgb(38, 38, 24);" id="clr26"></button>
        <button class="_3sW34" style="background-color: rgb(35, 35, 31);" id="clr27"></button>
      </div>
    </div>
  </div>
</body>
</html>


聊天！！
设置聊天壁纸
违约
script.js：

var txt = document.getElementById("inputMessage");
var newScreen = document.getElementById("newScreen");
newScreen.style.display = "none";
 
window.onload = function () {
  var chatBoxHeight = window.innerHeight - 80;
  var realChatBoxHeight = chatBoxHeight + "px";
  var chatBox = document.getElementById("chatBoxContainer").style.height = realChatBoxHeight;
}
 
window.onresize = function () {
  var chatBoxHeight = window.innerHeight - 80;
  var realChatBoxHeight = chatBoxHeight + "px";
  var chatBox = document.getElementById("chatBoxContainer").style.height = realChatBoxHeight;
}
 
function bringBack() {
  newScreen.style.display = "none";
}
 
function createBotChat (botChatText) {
  var chatContainer = document.getElementById("chatBoxContainer");
  var newBotChat = document.createElement("div");
  newBotChat.className = "newBotChat";
  newBotChat.textContent = botChatText;
  chatContainer.appendChild(newBotChat);
  newBotChat.scrollIntoView();
}
 
function demoForEnterKey(eventName) {
  if (eventName.keyCode == 13 && document.getElementById("inputMessage").value != "") {
    var txt = document.getElementById("inputMessage");
    var newChat = document.createElement("div");
    newChat.textContent = txt.value + "                   ";
    var chatContainer = document.getElementById("chatBoxContainer");
    newChat.className = "newChat";
    var timeStamp = document.createElement("div");
    timeStamp.className = "timeStamp";
    var today = new Date();
    var hour = today.getHours();
    var min;
    var amOrPm;
    if (today.getHours() > 24 && today.getHours() < 13) {
      amOrPm = "AM";
    } else {
      amOrPm = "PM";
    }
    if (hour == 13){
      hour = 1;
    } else if (hour ==14){
      hour = 2;
    }
    else if (hour == 15){
      hour = 3;
    }
    else if (hour == 16){
      hour = 4;
    }
    else if (hour == 17){
      hour = 5;
    }
    else if (hour == 18){
      hour = 6;
    }
    else if (hour == 19){
      hour = 7;
    }
    else if (hour == 20){
      hour = 8;
    }
    else if (hour == 21){
      hour = 9;
    }
    else if (hour == 22){
      hour = 9;
    }
    else if (hour == 23){
      hour = 10;
    }
    else if (hour == 24){
      hour = 11;
    }
    else if (hour == 1){
      hour = 12;
    }
    if (today.getMinutes() == 0){
      min = "00";
    } else if (today.getMinutes() == 1){
      min = "01";
    }
    else if (today.getMinutes() == 2){
      min = "02";
    }
    else if (today.getMinutes() == 3){
      min = "03";
    }
    else if (today.getMinutes() == 4){
      min = "04";
    }
    else if (today.getMinutes() == 5){
      min = "05";
    }
    else if (today.getMinutes() == 6){
      min = "06";
    }
    else if (today.getMinutes() == 7){
      min = "07";
    }
    else if (today.getMinutes() == 8){
      min = "08";
    }
    else if (today.getMinutes() == 9){
      min = "09";
    } else if (today.getMinutes() > 9) {
      min = today.getMinutes();
    }
    timeStamp.textContent = hour + ":" + min + " " + amOrPm;
    newChat.appendChild(timeStamp);
    chatContainer.appendChild(newChat);
    newChat.scrollIntoView();
    if (newChat.textContent.toLowerCase().includes("help") == true) {
      createBotChat("List of all commands:");
      createBotChat("• Clear - Clears the previous chats" + "\n" +" • Website - Displays our main page" + "\n" + "")
    } else if(newChat.textContent.toLowerCase().includes("clear") == true) {
      location.reload();
    } else if(newChat.textContent.toLowerCase().includes("website") == true) {
      createBotChat("Our website: example.com")
    }
    document.getElementById("inputMessage").value = "";
  }
}
 
createBotChat("Welcome to N8TheDev's ✨NEW✨ chatroom bot!!You should avoid using inline style as much as possible.
Practically all styling can be done in CSS
So instead of removing the border from all other boxes, you could add another class (i.e 
active
) to the clicked box:


._3sW34.active {
  cursor: pointer;
  border: 4px solid rgba(225, 225, 225, 1);
}



var txt=document.getElementById（“inputMessage”）；
var newScreen=document.getElementById（“新闻屏幕”）；
newScreen.style.display=“无”；
window.onload=函数（）{
var chatBoxHeight=window.innerHeight-80；
var realChatBoxHeight=chatBoxHeight+“px”；
var chatBox=document.getElementById（“chatBoxContainer”）.style.height=realChatBoxHeight；
}
window.onresize=函数（）{
var chatBoxHeight=window.innerHeight-80；
var realChatBoxHeight=chatBoxHeight+“px”；
var chatBox=document.getElementById（“chatBoxContainer”）.style.height=realChatBoxHeight；
}
函数bringBack（）{
newScreen.style.display=“无”；
}
函数createBotChat（botChatText）{
var chatContainer=document.getElementById（“chatBoxContainer”）；
var newBotChat=document.createElement（“div”）；
newBotChat.className=“newBotChat”；
newBotChat.textContent=botChatText；
appendChild（newBotChat）；
newBotChat.scrollIntoView（）；
}
函数demoForEnterKey（eventName）{
if（eventName.keyCode==13&&document.getElementById（“inputMessage”）.value！=“”）{
var txt=document.getElementById（“inputMessage”）；
var newChat=document.createElement（“div”）；
newChat.textContent=txt.value+“”；
var chatContainer=document.getElementById（“chatBoxContainer”）；
newChat.className=“newChat”；
var timeStamp=document.createElement（“div”）；
timeStamp.className=“timeStamp”；
var today=新日期（）；
var hour=today.getHours（）；
var-min；
var amOrPm；
if（today.getHours（）>24&&today.getHours（）<13）{
amOrPm=“AM”；
}否则{
amOrPm=“PM”；
}
如果（小时==13）{
小时=1；
}否则，如果（小时==14）{
小时=2；
}
否则，如果（小时==15）{
小时=3；
}
否则，如果（小时==16）{
小时=4；
}
否则，如果（小时==17）{
小时=5；
}
否则，如果（小时==18）{
小时=6；
}
否则，如果（小时==19）{
小时=7；
}
否则，如果（小时==20）{
小时=8；
}
否则，如果（小时==21）{
小时=9；
}
否则，如果（小时==22）{
小时=9；
}
否则，如果（小时==23）{
小时=10；
}
否则，如果（小时==24）{
小时=11；
}
否则，如果（小时==1）{
小时=12；
}
如果（today.getMinutes（）==0）{
min=“00”；
}else if（today.getMinutes（）==1）{
min=“01”；
}
else if（today.getMinutes（）==2）{
min=“02”；
}
else if（today.getMinutes（）==3）{
min=“03”；
}
else if（today.getMinutes（）==4）{
min=“04”；
}
else if（today.getMinutes（）==5）{
min=“05”；
}
else if（today.getMinutes（）==6）{
min=“06”；
}
else if（today.getMinutes（）==7）{
min=“07”；
}
else if（today.getMinutes（）==8）{
min=“08”；
}
else if（today.getMinutes（）==9）{
min=“09”；
}else if（today.getMinutes（）>9）{
min=today.getMinutes（）；
}
timeStamp.textContent=hour+“：“+min+”+amOrPm；
appendChild（时间戳）；
appendChild（newChat）；
newChat.scrollIntoView（）；
if（newChat.textContent.toLowerCase（）.includes（“帮助”）==true）{
createBotChat（“所有命令列表：”）；
createBotChat（“•清除-清除以前的聊天“+”\n“+”•网站-显示我们的主页“+”\n“+”）
}else if（newChat.textContent.toLowerCase（）.includes（“clear”）==true）{
location.reload（）；
}else if（newChat.textContent.toLowerCase（）.includes（“网站”）==true）{
createBotChat（“我们的网站：example.com”）
}
document.getElementById（“inputMessage”）.value=“”；
}
}

createBotChat（“欢迎来到N8TheDev's✨新的✨ 聊天室机器人！！您应该尽可能避免使用内联样式。
实际上，所有样式都可以在CSS中完成
因此，您可以向单击的框中添加另一个类（即
active
），而不是从所有其他框中删除边框：


._3sW34:focus {
  cursor: pointer;
  border: 4px solid rgba(225, 225, 225, 1);
}


这将需要从所有其他框中删除该类

甚至可以简单地使用
：focus
选择器

另一种更为详细的方法是将其父对象中的单击框索引设置为属性，然后在CSS中可以使用如下内容：



var txt=document.getElementById（“inputMessage”）；
var newScreen=document.getElementById（“新闻屏幕”）；
newScreen.style.display=“无”；
window.onload=函数（）{
var chatBoxHeight=window.innerHeight-80；
var realChatBoxHeight=chatBoxHeight+“px”；
var chatBox=document.getElementById（“chatBoxContainer”）.style.height=realChatBoxHeight；
}
window.onresize=