xgqfrms™, xgqfrms® : xgqfrms's offical website of cnblogs! xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

js auto hover button & html5 button autofocus

js auto hover button & html5 button autofocus

input

// html 5

<input name="myinput" value="whatever" autofocus />

// auto focus


// <input type="text" id="mytext"/>

function setFocusToTextBox(){
    document.getElementById("mytext").focus();
}


https://stackoverflow.com/questions/17500704/javascript-set-focus-to-html-form-element

HTML5 & autofoucs

https://www.w3schools.com/jsref/prop_pushbutton_autofocus.asp
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_pushbutton_autofocus

button ??? OK



<button id="myBtn" autofocus>My Button</button>


// <button onclick="myFunction()">Try it</button>

// <p id="demo"></p>


function myFunction() {
  var x = document.getElementById("myBtn").autofocus;
  document.getElementById("demo").innerHTML = x;
}

auto css hover in js

opacity & transparent


.hui-btn-dashed-hover {
    text-decoration: none;
    color: #0072f5;
    background-color: #fff;
    border-color: #0072f5;
    opacity: 0.7;
}
.hui-btn-dashed-hover:hover {
    opacity: 1.0;
}

js set button hover

手动添加,hover 样式,then hover chage transparent


/* .h-btn:not([disabled]):hover {
    text-decoration: none;
}
.h-btn-dashed:hover {
    text-decoration: none;
    color: #0072f5;
    background-color: #fff;
    border-color: #0072f5;
} */
.hui-btn-dashed-hover {
    text-decoration: none;
    color: #0072f5;
    background-color: #fff;
    border-color: #0072f5;
    /*  transparent: */
}



©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!


posted @   xgqfrms  阅读(428)  评论(7编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
阅读排行:
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· .NET10 - 预览版1新功能体验(一)
点击右上角即可分享
微信分享提示