我有一个带图标的div和一个文本框。
这是代码：
<div id="Backtb1">
<i class="fa fa-envelope" id="envelope" aria-hidden="true"></i>
</div>
<asp:TextBox ID="TextBox1" CssClass="TextButtons" runat="server" placeholder="Username" ></asp:TextBox>
以及Backtb1和textbox1的CSS：
.TextButtons {
position: relative;
border: none;
border-radius: 4px;
width: 130%;
height: 30px;
font-family: Calibri;
font-size: 120%;
font-weight: bold;
opacity: 0.6;
border: 1px solid #888;
background-color: #888;
margin-bottom: 2px;
-webkit-transition: width .35s ease-in-out;
transition: width .35s ease-in-out;
}
.TextButtons:focus{
width: 115%;
outline:0;
border: 1px solid;
border-color: orange;
opacity: 1;
}
#Backtb1 {
position: absolute;
top:0;
left:0;
opacity:0;
width: 130%;
color: white;
}
#Backtb1:focus {
background-color: orange;
opacity:1;
}
我试图在textbox1获得焦点后调用Backtb1事件。
因此，单击textbox1后，Backtb1应该将不透明度设置为1。
如何才能做到这一点？只是在CSS上还是应该使用jquery或javascript？
编辑：由于Vishal Kumar Sahu想要完整的页面代码。就是这个：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="Dope.Login" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="assets/CSS/LoginStylesheet.css" rel="stylesheet" />
<link href="assets/fontawesome/css/font-awesome.css" rel="stylesheet" />
<link href="assets/fontawesome/css/font-awesome.min.css" rel="stylesheet" />
<script type = "text/javascript">
function displayNextImage() {
x = (x === images.length - 1) ? 0 : x + 1;
document.getElementById("img").src = images[x];
}
function displayPreviousImage() {
x = (x <= 0) ? images.length - 1 : x - 1;
document.getElementById("img").src = images[x];
}
function startTimer() {
setInterval(displayNextImage, 7000);
}
document.addEventListener("DOMContentLoaded", function (event) {
startTimer();
});
var images = [], x = -1;
images[0] = "assets/Images/Image1.jpg";
images[1] = "assets/Images/Image2.jpg";
images[2] = "assets/Images/Image3.jpg";
images[3] = "assets/Images/Image4.jpg";
$("#textbox1").focus(function () {
$('#Backtb1').css("opacity", "1");
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="CenterContents" onload = "changeImage()">
<%-- write everything here --%>
<%-- backgroundimage --%>
<img id="img" src="assets/Images/Image3.jpg">
<div id="Shadows">
</div>
<div id="CenterPanel">
<div id="wot">
<div id="Backtb1">
<i class="fa fa-envelope" id="envelope" aria-hidden="true"></i>
</div>
<asp:TextBox ID="TextBox1" CssClass="TextButtons" runat="server" placeholder="Username" ></asp:TextBox>
<asp:TextBox ID="TextBox2" CssClass="TextButtons" runat="server" placeholder="Password"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" />
</div>
</div>
<%-- dont write anything lower than this --%>
</div>
</form>
</body>
</html>
最佳答案
当您在html代码中切换文本框和backtb1-div的位置时，仅使用CSS可以使用":focus hack"。因为您将绝对位置设置为backtb1，所以这应该是您可能的解决方案。
运行代码片段，当文本框获得/失去焦点时，您将看到backtb1出现和消失：
#backtb1 {
display: none;
background-color: red; color: white; border-radius: 7px;
max-width: 100px; font-family: sans-serif; font-weight: bold;
text-align: center; margin: 4px 0 0 0;
}
#textbox1:focus ~ #backtb1 {
display: block;
}<input type="password" id="textbox1">
<div id="backtb1">
<i class="fa fa-envelope" id="envelope" aria-hidden="true">Got focus</i>
</div>