改变输入焦点的div颜色 [英] Change the div color on input focus
本文介绍了改变输入焦点的div颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
试图用字母 s
div 的颜色b < div class =search_container>
< input type =textclass =search_fieldplaceholder =Search .../>
< div id =magnify_glass> s< / div>
< / div>
我试过的是这个
<脚本>
$（'。search_field'）。focus（function（）{
$（'＃magnify_glass'）。css（'color'，'＃ff0000'）;
}）;
< / script>
解决方案
假设您的代码位于< head> ，你只需要一个文档就绪处理程序。试试这个：
$ b
Update
要删除颜色，您需要添加 blur 处理程序也是。
< script>
$（function（）{
$（'。search_field'）。focus（function（）{
$（'＃magnify_glass'）。css（'color'，'＃ff0000' ）;
}）。blur（function（）{
$（'＃magnify_glass'）。css（'color'，'transparent'）; //或默认值。
}）;
}）;
< / script>
另外，最好使用 class 添加样式到一个元素，因为它是一个更好的问题分离：
.focus {color：＃F00; }
$ b $
$（'。 （）{$ b $（$＃$'$'$' magnify_glass'）。removeClass（'focus'）;
}）;
What am trying is to change the color of the div with letter s
<div class="search_container">
<input type="text" class="search_field" placeholder="Search..." />
<div id="magnify_glass">s</div>
</div>
What I tried is this
<script>
$('.search_field').focus(function() {
$('#magnify_glass').css('color','#ff0000');
});
</script>
解决方案
Assuming your code is in the <head> of the document, you just need a document ready handler. Try this:
Update
To remove the colour you need to add a blur handler too.
<script>
$(function() {
$('.search_field').focus(function() {
$('#magnify_glass').css('color','#ff0000');
}).blur(function() {
$('#magnify_glass').css('color','transparent'); // or whatever the default is.
});
});
</script>
Also, it's better to use a class to add styling to an element as it's a better separation of concerns:
.focus { color: #F00; }
$('.search_field').focus(function() {
$('#magnify_glass').addClass('focus');
}).blur(function() {
$('#magnify_glass').removeClass('focus');
});
这篇关于改变输入焦点的div颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
