Question

我在选择器之后遇到问题，继承我的代码：

HTML：

...

<div class="post">
    <form>
         <textarea placeholder="Message Here..." maxlength="255"></textarea>
    </form>
</div>

...

CSS：

.wrapper .left_section .profile_small .post form textarea:focus::after {
    content:"<input type='submit' value='Post' />"; 
}

因此，当选择文本区域（焦点）时，我希望显示提交按钮。有谁知道解决方案？

提前致谢。

Answer 1

您可以使用CSS常规兄弟选择器来执行您想要的操作 - 但您必须先将提交按钮放入HTML中：http://jsfiddle.net/teddyrised/qRtX6/

<div class="post">
    <form>
        <textarea placeholder="Message Here..." maxlength="255"></textarea>
        <input type="submit" value="Post" />
    </form>
</div>

对于你的CSS：

input[type='submit'] {
    display: none;
}
textarea:focus ~ input[type='submit'] {
    display: block;
}

警告：提交按钮必须在之后放置 textarea元素，因为一般的连续兄弟选择器只能在下游工作（即它不会查找前面的兄弟姐妹textarea，因此名称后续）。

Answer 2

这是另一个jquery的帮助：

<html>
<head>  
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
        function onFocus(){

        }

        $(document).ready(function(){
        $("#myTextArea").on("focus" , function(){
            var btn = document.createElement("button")
            $(btn).append("submit");
            $(btn).attr("id" , "mySubmit");
            $("#container").append(btn);
        })

        $("#myTextArea").on("blur" , function(){
            $("#mySubmit").remove();
        })
        })          
    </script>
<head>
<body>
    <span id="container">
        <textarea id="myTextArea">
        </textarea>
    </span> 
</body>

希望它可以帮助你，欢呼！

Answer 3

您不能在CSS中的内容标记中使用html来了解我所知道的内容

Answer 4

$( document ).ready(function() {
    $( ".create_post" ).focus(function() {
      $( ".create_post" ).after("<input class='submit_post' type='submit' value='Post' />");
      $( ".profile" ).css("margin-bottom","71px");
    });
    $( ".create_post" ).focusout(function() {
      $( ".submit_post" ).remove();
      $( ".profile" ).css("margin-bottom","");
    });
});

作品。

：focus ::选择器问题之后

4 个答案: