更改輸入焦點上的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