文章/答案/技术大牛

发布

社区首页 >问答首页 >更改输入焦点上的div颜色

问更改输入焦点上的div颜色
EN

Stack Overflow用户

提问于 2013-01-18 23:49:12

回答 2查看 4K关注 0票数 3

我尝试用字母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>

javascript

jquery

focus

回答 2

Stack Overflow用户

回答已采纳

发布于 2013-01-18 23:50:39

假设您的代码在文档的<head>中，您只需要一个文档就绪处理程序。试试这个：

更新

<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');
});

票数 5

Stack Overflow用户

发布于 2013-01-18 23:52:22

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

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

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/14402514

复制

相似问题

问更改输入焦点上的div颜色
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问更改输入焦点上的div颜色EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问更改输入焦点上的div颜色
EN