Question

如果输入中包含任何文字，如何使输入保持在悬停模式？

我想让输入框中有任何文本（比如在图像示例中的电子邮件中），看起来就像鼠标悬停在输入框中一样。我怎么能这样编辑我的css / html文件（或者如果我必须添加一个javascript我应该编码什么？）

鼠标不悬停电子邮件输入： enter image description here

鼠标悬停电子邮件输入（以及我在任何输入中何时出现文本）： enter image description here

使用的代码：

的index.html：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>formulary animated</title>
</head>
<body>
    <div class="container"> 
        <form>
            <div class="group">
                <label for="first_name">First Name</label>
                <input type="text" id="first_name"/>
            </div>  
            <div class="group">
                <label for="last_name">Last Name</label>
                <input type="text" id="last_name"/>
            </div>
            <div class="group">
                <label for="email">E-mail</label>
                <input type="text" id="email"/>
            </div>
            <div class="group">
                <label for="telephone">Telephone</label>
                <input type="text" id="telephone"/>
            </div> 
            <button class="submitForm">Send</button>
        </form>
    </div>
</body>
</html>

style.css中：

body {
    background: #333;
    font-family: helvetica;
    text-transform: capitalize;
    font-size: .7em;
    font-weight: bold;
}   

.container {
    margin: 0 auto;
    width: 600px;
    padding: 40px;
}

.group {
    position: relative;
    float: left;
    margin: 20px; 
}


input {
    top: 1px;
    padding: 10px 10px;
    border: none;
    outline: none;
    background: #87ceeb;
    color: #fff;
    width: 16em;
}

label {
    color: #fff;
    position: absolute;
    z-index: 1;
    top: 2px;
    left: 0;
    background: #87ceeb;
    padding: 7px 4px;
    margin: 2px 0px;
    transition: top 1s;
    -webkit-transition: top 1s;
}

.group:hover label {
    top:  -24px;
}

.submitForm {
    border: none;
    background: #ff4500;
    padding: 7px;
    color: #fff;
    border-radius: 2px;
    text-transform: uppercase;
    margin: 30px 6px 0;
    width: 40em;
    position: relative;
    box-shadow: 0 5px #ba3c50;
    cursor: pointer;
}

.submitForm:hover {
    top:2px;
    box-shadow: 0 3px #ba3c50;
}

Answer 1

当.group元素的值不再等于默认值时，我建议只将类名添加到父<input>元素：

// binding the anonymous function as the change event-handler:
$('.group input').on('change', function() {
  // toggling the class-name of 'hasEntry' on the closest
  // '.group' element; adding the class-name if the <input>
  // value is *not* the default-value, removing it if the
  // the value is the default-value:
  $(this).closest('.group').toggleClass('hasEntry', this.value !== this.defaultValue);
});

加上CSS：

.group:hover label,
.group.hasEntry label {
  top: -24px;
}

＆＃13;

$('.group input').on('change', function() {
  $(this).closest('.group').toggleClass('hasEntry', this.value !== this.defaultValue);
});

＆＃13;

body {
  background: #333;
  font-family: helvetica;
  text-transform: capitalize;
  font-size: .7em;
  font-weight: bold;
}
.container {
  margin: 0 auto;
  width: 600px;
  padding: 40px;
}
.group {
  position: relative;
  float: left;
  margin: 20px;
}
input {
  top: 1px;
  padding: 10px 10px;
  border: none;
  outline: none;
  background: #87ceeb;
  color: #fff;
  width: 16em;
}
label {
  color: #fff;
  position: absolute;
  z-index: 1;
  top: 2px;
  left: 0;
  background: #87ceeb;
  padding: 7px 4px;
  margin: 2px 0px;
  transition: top 1s;
  -webkit-transition: top 1s;
}
.group:hover label,
.group.hasEntry label {
  top: -24px;
}
.submitForm {
  border: none;
  background: #ff4500;
  padding: 7px;
  color: #fff;
  border-radius: 2px;
  text-transform: uppercase;
  margin: 30px 6px 0;
  width: 40em;
  position: relative;
  box-shadow: 0 5px #ba3c50;
  cursor: pointer;
}
.submitForm:hover {
  top: 2px;
  box-shadow: 0 3px #ba3c50;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <form>
    <div class="group">
      <label for="first_name">First Name</label>
      <input type="text" id="first_name" />
    </div>
    <div class="group">
      <label for="last_name">Last Name</label>
      <input type="text" id="last_name" />
    </div>
    <div class="group">
      <label for="email">E-mail</label>
      <input type="text" id="email" />
    </div>
    <div class="group">
      <label for="telephone">Telephone</label>
      <input type="text" id="telephone" />
    </div>
    <button class="submitForm">Send</button>
  </form>
</div>

＆＃13;

参考文献：

JavaScript的：
- HTMLInputElement。
jQuery的：
- closest()。
- on()。
- toggleClass()。

Answer 2

如果您使用的是Jquery，则可以使用

内置的悬停功能

<强>演示 http://jsfiddle.net/utxy967w/

<强>代码

   $(document).ready(function() {

            $('.group').hover(

               function () {
                  $(this).find("label").css("top","-24px");
               }, 

               function () {
                   if ($("input", this).val() == "") {
                  $("label", this).css("top","0px");
                   }
               }
            );
         });

当包含任何文本时，如何使输入保持在悬停模式中？

2 个答案: