如何在CSS中悬停编辑文本？

Question

我被困在edittext放置在田地附近的问题。

必需：

当我放入div1或div2时，edittext字段应该是可见的并且应该是可编辑的

当我放置在div1或div2之外时，编辑文本不应该只显示为和可见。

HTML：

<div class="textboxes">
<ul>
    <li><input type="text" id="txt" /></li></ul>
</div>
<div class="edit">
<a href="#" id="edit"   runat="server" >edit</a>

</div>

CSS：

.textboxes {margin:0; padding:0; display: none; }
.textboxes ul li {list-style-type:none; padding:5px 0 0;}

jQuery的：

 $("#edit").click(function() {
      if ($('.textboxes').is(':visible')) {
         $('.textboxes').hide();
         // do save info
         //$(this).val('Edit');
     }
     else {
         $('.textboxes').show();
        // $(this).val('Edit');
     }



    $(this).hide().after('<span class="edit">' + $(this).val() + '</span>');  
});

Answer 1

查看下面的演示..这可能有助于你......

Demo

<强> HTML：

<div class="wrap">
        <div class="box">
            <div>From :</div>
            <div class="txt">India</div>
            <div class="input"><input type="text" /></div>
        </div>
        <div class="box">
            <div>To :</div>
            <div class="txt">America</div>
            <div class="input"><input type="text" /></div>
        </div>
</div>

<强>脚本：

$(".box").mouseenter(function (e1) {
     var txt = $(this).children(".txt");
     input = $(this).children(".input");

    input.children("input").val(txt.html());
    txt.css("display", "none");
    input.css("display", "inline-block");

}).mouseleave(function (e2) {
    var txt = $(this).children(".txt");
    var input = $(this).children(".input");

    txt.html(input.children("input").val());
    input.css("display", "none");
    txt.css("display", "inline-block");
});

<强>输出：

Answer 2

Jquery中的鼠标输入功能将帮助您（我希望如此）来实现您的要求。

这是一个例子

$('.textboxes').hide();

$( "#edit" )
  .mouseenter(function() {
    $('.textboxes').show();
  })
  .mouseleave(function() {
    $('.textboxes').hide();
  });

Answer 3

<强> HTML：

<div id="showTextBox">
    <input type="text" id="textBox" style="visibility:hidden"></input>
</div>

<强> JQuery的：

$("#showTextBox").mouseover(function() { 
    $("#textBox").css('visibility','visible'); 
});

$("#showTextBox").mouseout(function() { 
    $("#textBox").css('visibility','hidden');    
});

Working Demo