我们正在尝试更改div
字母s
<div class="search_container">
<input type="text" class="search_field" placeholder="Search..." />
<div id="magnify_glass">s</div>
</div>
我试过的是这个
<script>
$('.search_field').focus(function() {
$('#magnify_glass').css('color','#ff0000');
});
</script>
答案 0 :(得分:5)
假设您的代码位于文档的<head>
中,您只需要一个文档就绪处理程序。试试这个:
更新
要删除添加blur
处理程序所需的颜色。
<script>
$(function() {
$('.search_field').focus(function() {
$('#magnify_glass').css('color','#ff0000');
}).blur(function() {
$('#magnify_glass').css('color','transparent'); // or whatever the default is.
});
});
</script>
此外,最好使用class
为元素添加样式,因为它可以更好地分离关注点:
.focus { color: #F00; }
$('.search_field').focus(function() {
$('#magnify_glass').addClass('focus');
}).blur(function() {
$('#magnify_glass').removeClass('focus');
});
答案 1 :(得分:2)
您的代码很好并且正常工作您需要确保在document.ready中拥有代码以确保在脚本访问之前元素可用性并且您添加了jquery库。
<强> Live Demo 强>
$('.search_field').focus(function () {
$('#magnify_glass').css('color', '#ff0000');
}).blur(function() {
$('#magnify_glass').css('color', '#000000');
})