0

私がやりたいことはこれです：

私のウェブサイトでは、左隅に div を配置したいと考えています。マウスがその上にないときは、色付きの単純な正方形です (今のところ)。

そのために、私はこのコードを持っています:

<div id='bot'>
</div>

もちろん、私のcssでは非常に単純です：

#bot{
  position: fixed !important;
  bottom: 40px !important;
  width:50px;
  height:150px;
  left:0%;
  border:1px solid black;
  box-shadow:1px 1px 1px;
}

#bot:hover{
  width:500px;
}

わかりましたので、今のところこれで完了です。今、私が MOUSEOVERIT したときにこの div に表示したいのは、iframe を表示することでしょうか:

<iframe name='botframe' src='http://demo.vhost.pandorabots.com/pandora/talk?botid=a431414a6e34774c' frameborder='0' scrolling='no'></iframe>

これはまったく可能ですか？もしそうなら、私は何をしなければなりませんか？必要に応じて JavaScript を少し理解していますが、jQuery についてはあまり理解していません。jQuery が必要な場合は、何をしなければならないか、コードをどこに配置するかを正確に教えてください。

よろしくお願いします

4

2 に答える 2

0

div pls に id を使用する代わりに、iframe に id を入力します。

<div> <iframe **id='bot'** name='botframe' src='http://demo.vhost.pandorabots.com/pandora/talk?botid=a431414a6e34774c' frameborder='0' scrolling='no'></iframe>
</div>
于 2013-08-21T14:01:08.400 に答える
0

iframe の上に div を配置し、ホバー時にそれぞれの z-index を変更します。

<iframe id='botframe' name='botframe' src='http://placehold.it/50/' frameborder='0' scrolling='no'></iframe>
<div id='bot'></div>

#bot{position:fixed; background:pink; bottom:40px; width:50px; height:150px; left:0; border:1px solid black;}
#botframe {position:fixed; background:yellow; bottom:40px; width:50px; height:150px; left:0; border:1px solid red;}
#bot:hover{z-index:-1;}
#botframe:hover{z-index:100;}

http://jsfiddle.net/gcWeC/

于 2013-08-21T14:08:19.070 に答える