关于实现"输入框"获得焦点时改变父级背景图片问题?

大白兔警察
  • 96

想在输入框获得焦点时,改变父级的背景图片(我在输入框框外包了一个有背景图片的div),div不能直接获得焦点即使加了 tabindex 属性,我想尝试用css写,我先用了给输入框加:focus伪类的方法,试图通过给输入框(class=search-text)焦点来强行改变父级div背景图片(class=search),代码如下:

.search-text:focus .search{
    background: url(cssimg/frame_bg.png) no-repeat -234px -162px;}

结果是并不能改变背景图片。我想知道是否可以通过css来实现这个效果?

css行不通,于是我用js去实现,还是碰到了问题,可能是我哪里又粗心了(我的js不好呜呜呜)希望大神指点指点,写了两种写法,不知道为什么还是实现不了,代码如下:



var otext=document.getElementById('searchtext');
    var osearch=document.getElementById('search');
     otext.onfocus=function(){
         osearch.style.background=" url(cssimg/frame_bg.png) no-repeat -234px -162px";}

第二种写法

    osearch.style.backgroundImage="url(cssimg/frame_bg.png)";
    osearch.style.backgroundPositionX="-234px";
    osearch.style.backgroundPositionY="-162px"; 
 

我刚刚把我自己写的这个输入框的代码单独拿出来写了个demo,发现可以正常显示,demo代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #search{
            position:relative;
            height: 39px;
            width: 228px;  
            z-index: 2; 
            background: url(cssimg/frame_bg.png) no-repeat 0 -162px;
        }
        .search-text{
            border: 0 none;
            color: #c3c3c3;
            height: 20px;
            line-height: 20px;
            width: 180px;
            margin: 9px 0 10px 15px;
            outline: none;
        }

        .go-search{
            background: url(cssimg/search.jpg) no-repeat;
            border: 0 none;
            cursor: pointer;
            height: 30px;
            position: absolute;
            right:7px;
            top: 4px;
            z-index: 2;
            width: 28px;
            outline: none;
        }
    </style>
    <script type="text/javascript">
        window.onload=function(){
            var stext=document.getElementById('searchtext');
            var search=document.getElementById('search');
            stext.onfocus=function(){
                 search.style.background="url(cssimg/frame_bg.png) no-repeat -234px -162px";
                 // search.style.backgroundImage="url(cssimg/frame_bg.png)";
                 // search.style.backgroundPositionX="-234px";
                 // search.style.backgroundPositionY="-162px"; 
                 
                 this.value='';
             };
             stext.onblur=function(){
                 search.style.background="url(cssimg/frame_bg.png) no-repeat 0px -162px";
                 //第二种写法
                 // search.style.backgroundImage="url(cssimg/frame_bg.png)";
                 // search.style.backgroundPositionX="0px";
                 // search.style.backgroundPositionY="-162px";
                 if(this.value.length < 1) this.value='请输入'; 
             };  
         };
    </script>
</head>
<body>
     <div id="search">
        <form action="#type">
            <input class="search-text" id="searchtext" type="text" value="请输入"  >
            <input class="go-search" type="button" >
        </form>
    </div>
</body>
</html>

那估计是我其他地方可能出问题影响到了,只能再查查其他地方了。

回复
阅读 5.1k
3 个回答
安歌
  • 6.9k
✓ 已被采纳

伪类的写法应该只能针对元素本身,所以我认为通过css实现的方法是不行的,但是js是一定可以实现的,因为题主没有给出代码,所以自己写了个小demo测试了一下是没问题的

`

<!DOCTYPE html> 
    <head> 
    <meta charset="utf-8" />  
    <title>css实现改变背景图</title> 
    <style type="text/css"> 
        #search{ 
            width: 600px; 
            height: 300px;
            text-align: center;
            background: url('111.jpg');
        } 
        
    </style> 
    </head> 
        <body> 
            <div id ="search">
                <input type="text" id="searchtext">
            </div> 
        </body> 
        <script type="text/javascript"> 
        var search = document.getElementById('search');
        //console.log(search);
        var searchtext = document.getElementById('searchtext');
        //console.log(searchtext);
        searchtext.onfocus=function(){
                search.style.background="url(222.png)";
        };
    </script> 
</html>

`

图片就不提供了,随便找两张,修改一下对应名称就好,如果题主想看看自己代码的错误也可以贴上来交流下看看

纯css的方法只能改变子元素或同级元素的样式,用js是可以实现的,你的没有效果可能是你的js代码放在了head里面,在body的内容还没加载出来时就执行了。

我写了一个小demo,你可以看看

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        input:focus~div{
            display: block;
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="div">
        <input id="test" type="text">
    </div>
    <script>
        document.getElementById('test').onfocus=function() {
            document.getElementById('div').style.backgroundColor='red';
            document.getElementById('div').style.width='200px';
            document.getElementById('div').style.height='200px';
        };
    </script>
</body>
</html>
会飞的猴子
  • 15
<div class='outBox'>
    <input type="text" name="usrName">
    <div class='backgroundDiv'>
</div>

写出这样的,然后通过定位,让.backgroundDiv 看起来包含input,然后增加css

input + div {background:url('./img01.png');}
input:focus + div {background:url('./img02.png');}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏