想問一下默認(rèn)button點(diǎn)擊事件行為，要使用別的標(biāo)簽怎么模擬？

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            body,
            html {
                margin: 0;
                padding: 0;
            }
            
        </style>
    </head>

    <body>
        <button id="btn1" type="button">點(diǎn)我1</button>
    </body>

</html>

這個(gè)button模式行為鼠標(biāo)點(diǎn)擊背景顏色變深，鼠標(biāo)一直不送還是變深，鼠標(biāo)松開顏色變化，想了好久沒想出來js應(yīng)該如何模擬?求大佬們幫助一下

回答

編輯回答

九年囚

active，激活時(shí)的狀態(tài)

.button{
    outline: none;
    background: #2379CB;
    color:#fff;
    text-align: center;
    cursor: pointer;
    border-radius: 3px;
}
.button:active{
    background: #086AC5;
}

<div class="button">button</div>

2017年12月9日 04:27

編輯回答

薄荷糖

Amazing article thanks for sharing run 3

2017年8月17日 03:25

編輯回答

舊城人

The article you have shared here very awesome. I really like and appreciated your work. I read deeply your article, the points you have mentioned in this article are useful

Text Faces

2017年2月4日 21:27

編輯回答

離魂曲

使用:active就好了
假如是span標(biāo)簽

span:active {
    color:red
}

2018年8月16日 01:01

編輯回答

蟲児飛

有2種方法，一種用css控制（我注釋掉了），一種js控制

<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    body,
    html {
      margin: 0;
      padding: 0;
    }

    .btn {
      display: inline-block;
      border-color: rgb(216, 216, 216) rgb(209, 209, 209) rgb(186, 186, 186);
      border-style: solid;
      border-width: 1px;
      padding: 1px 7px 2px;
      font-size: 12px;
      cursor: default;
    }

    .btn:active {
      /*background-color: #eee;*/
    }
  </style>
</head>

<body>
<button id="btn1" type="button">點(diǎn)我1</button>
<div id="btn2" class="btn">點(diǎn)我2</div>
</body>
<script>
  var btn2 = document.getElementById('btn2');
  btn2.addEventListener('mousedown', function (e) {
    btn2.style.backgroundColor = '#eee';
  })
  btn2.addEventListener('mouseup', function () {
    btn2.style.backgroundColor = '#fff';
  });
</script>
</html>

2018年2月15日 07:59

編輯回答

情已空

給你寫個(gè)簡單的列子

<!DOCTYPE html>
<html>
<head>
<script>
function mouseDown()
{
document.getElementById("p1").style.color="red";
}

function mouseUp()
{
document.getElementById("p1").style.color="green";
}
</script>
</head>
<body>

<p id="p1" onmousedown="mouseDown()" onmouseup="mouseUp()">
請(qǐng)點(diǎn)擊文本！mouseDown() 函數(shù)當(dāng)鼠標(biāo)按鈕在段落上被按下時(shí)觸發(fā)。此函數(shù)把文本顏色設(shè)置為紅色。mouseUp() 函數(shù)在鼠標(biāo)按鈕被釋放時(shí)觸發(fā)。mouseUp() 函數(shù)把文本的顏色設(shè)置為綠色。
</p>

</body>
</html>

這樣就可以了

2018年6月27日 18:03