Question

我想要一些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文件来隐藏和显示帖子按钮

Answer 1

我会说当你使用jquery检测textbox1的焦点事件时，不要使用css hover尝试向textbox1添加一个类。然后同时使用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＆＃39; .On＆＃39;： http://api.jquery.com/on/

jQuery＆＃39; addClass＆＃39;： http://api.jquery.com/addclass/

Answer 2

将文本框和帖子按钮放在一个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>

文本框css悬停和按钮显示asp.net c＃

2 个答案: