更改输入焦点上的div颜色

Question

我想要的是用字母s改变div的颜色

<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>

Answer 1

假设您的代码位于文档的<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');
});

Answer 2

您的代码很好并且正常工作您需要确保在document.ready中拥有代码以确保在脚本访问之前元素可用性并且您添加了jquery库。

现场演示

$('.search_field').focus(function () {
    $('#magnify_glass').css('color', '#ff0000');
}).blur(function() {
    $('#magnify_glass').css('color', '#000000');
})

更改输入焦点上的div颜色

问题描述

2 个解决方案

解决方案1
5 已采纳 2013-01-18 15:50:39

解决方案2
2 2013-01-18 15:52:21

更改输入焦点上的div颜色

问题描述

2 个解决方案

解决方案1 5 已采纳 2013-01-18 15:50:39

解决方案2 2 2013-01-18 15:52:21

解决方案1
5 已采纳 2013-01-18 15:50:39

解决方案2
2 2013-01-18 15:52:21