![](/img/trans.png)
[英]Asp.net C# display data from gridview to TextBox using Javascript
[英]textbox css hover and button display asp.net c#
我想要一些CSS代码和JavaScript到我的文本框和一个按钮,第一次我的按钮是隐藏的
当我的鼠标移到文本框时,它的高度应该增加,然后我将鼠标移到应该保持增大大小的另一个地方。
当我的鼠标移至文本框时,应该可见一个按钮,然后我将鼠标移到该按钮应可见的另一个地方。
这是我现在正在使用的CSS文件,但是如果我想获得更高的要求,我想对此进行一些更改。
#TextBox1 {
background: #FFFFFF;
color: #000000;
height: 30px;
width:510px;
padding: 6px 15px 6px 35px;
border-radius: 5px;
box-shadow: 0 1px 0 #ccc inset;
transition: 500ms all ease;
outline: 0;
}
#TextBox1:hover {
height: 100px;
}
发布按钮CSS
#Post {
background: rgb(66, 184, 221); /* this is a light blue */
border-radius: 20px;
}
如何根据需要更改此CSS文件? 我想我还需要一个JavaScript文件来隐藏和显示帖子按钮
我想说,当您使用jquery检测到textbox1的焦点事件时,请尝试将类添加到textbox1中,而不是使用css悬停。 然后同时使用jQuery使按钮可见。
下面的示例代码:
//CSS
#TextBox1Clicked{
Height: 100px;
}
//jQuery
$(document).on('focus', '#TextBox1', function(){
//Show the button
$('#yourButtonId').show();
//Add the css class to the text box to make it taller
$('#TextBox1').addClass('TextBox1Clicked');
});
资源:jQuery'.On': http : //api.jquery.com/on/
jQuery'addClass': http : //api.jquery.com/addclass/
将文本框和发布按钮放在一个div中,然后使用以下CSS。
第一个HTML
<div class="textBoxWrapper" >
<textarea class="textbox_1" id="TextBox1" ></textarea>
<input type="button" id="post" value="Post me"></input>
</div>
现在是CSS
#TextBox1 {
background: #FFFFFF;
color: #000000;
height: 30px;
width:510px;
padding: 6px 15px 6px 35px;
border-radius: 5px;
box-shadow: 0 1px 0 #ccc inset;
transition: 500ms all ease;
outline: 0;
}
#TextBox1:hover {
height: 100px;
}
#Post {
background: rgb(66, 184, 221); /* this is a light blue */
border-radius: 20px;
display: none;
}
.textBoxWrapper:hover > #Post {
display: block;
}
问题2的纯CSS解决方案。
对于1,我将使用JavaScript
.TextBox1Large {
height: 100px;
}
<asp:textbox ID="TextBox1" runat="server"></asp:textbox>
<script>
document.getElementById("<%=TextBox1.ClientID %>").addEventListener("mouseover", changeHeightOfTextBox, false);
function changeHeightOfTextBox() {
document.getElementById("<%=TextBox1.ClientID %>").className = "TextBox1Large";
//Delete the event, since it is needed only once.
document.getElementById("<%=TextBox1.ClientID %>").removeEventListener("mouseover", changeHeightOfTextBox, false);
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.