单击按钮时，如何取消我的按钮：css 中的 hover？
[英]How do I cancel my button:hover in css when a button is clicked?
问题描述
I have a .button:hover thing in my css code, but I want that code to be canceled for five seconds when my button is pressed?
我的 css 代码中有一个.button:hover东西，但是我希望在按下按钮时取消该代码五秒钟？ My code is below.我的代码如下。
function myFunction(){ var text = document.getElementById('input').value; var textArray = text.split(" ").sort(); var output= document.getElementById('output'); output.value = textArray.toString().replace(/,/g," "); } function maFunction() { var copyText = document.getElementById("output"); copyText.select(); copyText.setSelectionRange(0, 99999) document.execCommand("copy"); } /*function ok() { document.getElementById("copied").innerHTML = "Hello World"; } */ /*function fadeOut(){ location.href='index.html#open-modal'; setTimeout(function () { location.href='index.html#modal-close'; }, 1000); }*/
body { margin-top: 10px; margin-left: 20px; display: flex; }.form { margin-right: 20px; background: #ffffff; position: relative; }.input { height: 700px; width: 600px; margin-top: 15px; outline: none; font-size: 26px; resize: none; border-style: solid; border-color: #4CAF50; border-width: 2px; outline: none; border-radius: 10px; margin-top: 0px; padding-top: 5px; padding-left: 10px; }.otput { height: 695px; width: 620px; outline: none; resize: none; border-style: solid; border-color: #4CAF50; border-width: 2px; border-radius: 10px; outline: none; margin-left: 10px; }.output { height: 650px; width: 512px; outline: none; font-size: 26px; resize: none; outline: none; border: none; padding: 0px; margin-top: 5px; margin-left: 10px; }.button { background: #4CAF50; border: none; outline: none; color: #ffffff; padding: 14px; width: 100px; border-radius: 0 10px; /*margin-left: 1134px;*/ font-size: 22px; cursor: pointer; position: absolute; }.speech-bubble { height: 20px; width: 150px; color: white; font-size: 20px; text-align: left; position: relative; background: #4CAF50; border-radius: 1px; padding: 10px 10px 10px 5px; box-shadow: 0 4px 8px 0 rgba(141, 105, 105, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); display: none; margin-top: 35px; margin-left: 630px; }.speech-bubble:after { content: ''; position: absolute; left: 0; top: 50%; width: 0; height: 0; border: 9px solid transparent; border-right-color: #4CAF50; border-left: 0; margin-top: -9px; margin-left: -9px; }.button:hover +.speech-bubble { transform: translateY(-690px); display: block; }.button:hover +.speech-bubble:after { display: block; }::selection { color: black; background: lightblue; }::-webkit-scrollbar { width: 10px; }::-webkit-scrollbar:hover { width: 20px; }::-webkit-scrollbar-thumb { background: #888; } /*.modal-window { position: fixed; background-color: rgba(200, 200, 200, 0.75); top: 0; right: 0; bottom: 0; left: 0; z-index: 999; opacity: 0; pointer-events: none; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; }.modal-window:target { opacity: 1; pointer-events: auto; }.modal-window > div { width: 170px; height: 50px; padding: 10px; position: relative; margin: 10% auto; /*padding: 2rem;*/ /*background: #fff; color: #333; }.modal-window.copy{ font-size: 20px; }*/
<html> <head> <title>alphabetical order machine</title> <link rel="stylesheet" href="index.css"> </head> <body> <textarea class="input" id="input" type="text" placeholder="type your text here" onchange="myFunction()" onkeyup="myFunction()"></textarea> <form class="otput"> <textarea class="output" id="output" type="output" placeholder="your alphabetized text will appear here"></textarea> <input class="button" type='button' value="copy" onclick="maFunction()"> <p class="speech-bubble">click to copy text</p> <.--p id="copied" class="copied"></p--> </form> <script src="index.js"></script> </body> </html>
2 个解决方案
解决方案1
2 已采纳 2020-04-26 15:49:07
You can add a class on click and use it to set display:none for the speech buble.您可以在单击时添加class并使用它为语音气泡设置display:none 。
possible example可能的例子
function myFunction(){ var text = document.getElementById('input').value; var textArray = text.split(" ").sort(); var output= document.getElementById('output'); output.value = textArray.toString().replace(/,/g," "); } function maFunction(el) { //update: el el.classList.add('clicked');// update var copyText = document.getElementById("output"); copyText.select(); copyText.setSelectionRange(0, 99999) document.execCommand("copy"); setTimeout( () => el.classList.remove('clicked'),5000);//Oups, needed: update to recover hover behavior after 5s } /*function ok() { document.getElementById("copied").innerHTML = "Hello World"; } */ /*function fadeOut(){ location.href='index.html#open-modal'; setTimeout(function () { location.href='index.html#modal-close'; }, 1000); }*/
body { margin-top: 10px; margin-left: 20px; display: flex; }.form { margin-right: 20px; background: #ffffff; position: relative; }.input { height: 700px; width: 600px; margin-top: 15px; outline: none; font-size: 26px; resize: none; border-style: solid; border-color: #4CAF50; border-width: 2px; outline: none; border-radius: 10px; margin-top: 0px; padding-top: 5px; padding-left: 10px; }.otput { height: 695px; width: 620px; outline: none; resize: none; border-style: solid; border-color: #4CAF50; border-width: 2px; border-radius: 10px; outline: none; margin-left: 10px; }.output { height: 650px; width: 512px; outline: none; font-size: 26px; resize: none; outline: none; border: none; padding: 0px; margin-top: 5px; margin-left: 10px; }.button { background: #4CAF50; border: none; outline: none; color: #ffffff; padding: 14px; width: 100px; border-radius: 0 10px; /*margin-left: 1134px;*/ font-size: 22px; cursor: pointer; position: absolute; }.speech-bubble { height: 20px; width: 150px; color: white; font-size: 20px; text-align: left; position: relative; background: #4CAF50; border-radius: 1px; padding: 10px 10px 10px 5px; box-shadow: 0 4px 8px 0 rgba(141, 105, 105, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); display: none; margin-top: 35px; margin-left: 630px; }.speech-bubble:after { content: ''; position: absolute; left: 0; top: 50%; width: 0; height: 0; border: 9px solid transparent; border-right-color: #4CAF50; border-left: 0; margin-top: -9px; margin-left: -9px; }.button:hover +.speech-bubble { transform: translateY(-690px); display: block; }.button:hover +.speech-bubble:after { display: block; }.button.clicked +.speech-bubble {display:none}/* UPDATE HERE */::selection { color: black; background: lightblue; }::-webkit-scrollbar { width: 10px; }::-webkit-scrollbar:hover { width: 20px; }::-webkit-scrollbar-thumb { background: #888; } /*.modal-window { position: fixed; background-color: rgba(200, 200, 200, 0.75); top: 0; right: 0; bottom: 0; left: 0; z-index: 999; opacity: 0; pointer-events: none; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; }.modal-window:target { opacity: 1; pointer-events: auto; }.modal-window > div { width: 170px; height: 50px; padding: 10px; position: relative; margin: 10% auto; /*padding: 2rem;*/ /*background: #fff; color: #333; }.modal-window.copy{ font-size: 20px; }*/
<textarea class="input" id="input" type="text" placeholder="type your text here" onchange="myFunction()" onkeyup="myFunction()"></textarea> <form class="otput"> <textarea class="output" id="output" type="output" placeholder="your alphabetized text will appear here"></textarea> <input class="button" type='button' value="copy" onclick="maFunction(this)"><!-- update on onclick --> <p class="speech-bubble">click to copy text</p> <!--p id="copied" class="copied"></p--> </form>
解决方案2
0 2020-04-26 15:53:03
Create a new class called .clicked , which contains the styling you want to see when the button is clicked.创建一个名为.clicked的新 class ，其中包含您希望在单击按钮时看到的样式。 Then add the class to the button for 5 seconds.然后将 class 添加到按钮 5 秒。
function clicked (button) { button.classList.add('clicked'); setTimeout( () => button.classList.remove('clicked'), 5000); }
button:hover.clicked { background-color: red; } button:hover.clicked +.speech-bubble { color: blue; background-color: #aaa; }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" /> <div class="m-4"> <button class="btn btn-primary" onclick="clicked(this);">Sample Button</button> <p class="speech-bubble">click to copy text</p> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何将鼠标悬停在浏览器的“取消”按钮上？ - How do I hover on Browser's cancel button?
单击取消按钮时如何消除错误 - How to remove error when cancel button is clicked
如何使用 HTML、css 和 javascript 创建此 hover 按钮 - How do I create this hover button Using HTML, css and javascript
单击按钮后，如何将pdf文件加载到模态中？ - How do I load my pdf file into my modal when the button is clicked?
我如何创建一个固定的按钮，当使用HTML和CSS单击该按钮时会打开一个联系表单？ - How do I create a fixed button which opens a contact form when clicked using HTML & CSS?
当我将鼠标悬停在按钮边缘时，如何使所有条形变为黑色？ - How do i get all of my bars to turn black when I hover over the edge of the button?
单击按钮时如何删除CSS部分 - How can I remove a css portion when a button is clicked
为什么单击“新产品”按钮后，我的“保存”按钮和“取消”按钮没有显示？ - Why my Save button and Cancel Button doesn't show after I clicked the New Product button?
在“确认”对话框中单击“取消”按钮时，如何打开其他页面？ - how to open a different page when cancel button is clicked in the Confirm dialog?
单击“清除表单”时，如何重置单选按钮的值？ - How do I reset my radio button values when “clear form” is clicked?
相关标签