javascript - 单击或悬停后可以更改状态吗？

Question

尝试使输入框执行以下操作:正常状态下输入框文本为 x，悬停状态下输入文本为 y 并且您是否将框保留为 z 并且可以再次保持 z 通过所有状态。

-更新 有一个背景图像和文本淡出的搜索框，一旦你悬停它就很生动，一旦你聚焦它，它就很生动，有一个 2px 的边框，但是一旦你离开它我就失去了一切:(所以需要一个技巧来使背景图片(其中有 x 和 y，每个状态一个)和文本保持生动，但松开 2px 边框

---UPDATE ---
/* Search box */
.searchbox {
    background: url(../images/search-grey.gif) no-repeat 6px -5px #f8f8f8;
    width:240px; 
    margin-right:4px; 
    margin-left:11px; 
    color:#cccccc;   
    vertical-align: top; 
    padding: 4px 2px 4px 79px;
    border-color: #4FA4F9;
}
.searchbox:hover {
    background: url(../images/search-greyb.gif) no-repeat 6px -5px #f8f8f8;
    color:#888888; 
}
.searchbox:focus {
    background: url(../images/search-greyb.gif) no-repeat 5px -6px #ffffff;
    width:239px; 
    color:#888888; 
    padding: 3px 2px 3px 78px;
}
.searchbox.blur {
    background: url(../images/search-greyb.gif) no-repeat 6px -5px #ffffff;
    width:239px; 
    color:#000000; 
    padding: 4px 2px 4px 79px;
}

@-moz-document url-prefix() {
    .searchbox {
    background: url(../images/search-grey.gif) no-repeat 6px -4px #f8f8f8;
    }
}
@-moz-document url-prefix() {
    .searchbox:hover {
    background: url(../images/search-greyb.gif) no-repeat 6px -4px #f8f8f8;
        }
}
@-moz-document url-prefix() {
    .searchbox:focus {
    background: url(../images/search-greyb.gif) no-repeat 5px -5px #f8f8f8;
    }
}

input::-moz-focus-inner /*Remove button padding in FF*/
{ 
    border: 0;
    padding: 0;
}
input, select, textarea {
  margin: 1 0 0;
}
input, textarea, .date {
  border: 1px solid #aaa;
  border-radius: 3px;
  color:#333;
}
input {
  font-size: 13px;
  padding: 0px;
}
textarea {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  padding: 4px 4px 4px 4px;
}

select:hover {border: 1px solid #4FA4F9;}
input:hover {border: 1px solid #4FA4F9;}
textarea:hover {border: 1px solid #4FA4F9;}
select:focus {padding: 0px;}
input:focus {padding: 0px;}
textarea:focus {padding: 3px 3px 3px 3px;

}

--- HTML ---

<input id="searchdomain" name='domain' type="text" style="font-size:15px;" class="searchbox"/>

---js----

/* Search Box Leave */
$(".searchbox").blur(function(){
    $(this).addClass("blur");
});

Answer 1

您可以通过设置类使用 jQuery 来完成此操作。

$(".searchable").blur(function() {
    $(this).addClass("blur");
});

然后在你的css中你可以这样设置颜色

.searchable.blur
{
  color:#000;   
}

这是一个 jsfiddle 示例 -> http://jsfiddle.net/y46Wk/2/

请记住，除非您删除该类，否则该元素不会再次显示其悬停颜色。