javascript - 关于实现"输入框"获得焦点时改变父级背景图片问题？-PHP中文网问答

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




    
    Document

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

<!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> <p id ="search"> <input type="text" id="searchtext"> </p> </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>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> input:focus~p{ display: block; width: 100px; height: 100px; background-color: red; } </style> </head> <body> <p id="p"> <input id="test" type="text"> </p> <script> document.getElementById('test').onfocus=function() { document.getElementById('p').style.backgroundColor='red'; document.getElementById('p').style.width='200px'; document.getElementById('p').style.height='200px'; }; </script> </body> </html>

全部回复(3)

天蓬老师2017-04-11 11:41:28 3楼

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

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

赞 +0

添加回复

PHP中文网2017-04-11 11:41:28 2楼

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

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

迷茫2017-04-11 11:41:28 1楼

<p class='outBox'>
    <input type="text" name="usrName">
    <p class='backgroundp'>
</p>

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

input + p {background:url('./img01.png');}
input:focus + p {background:url('./img02.png');}