ugrás a tartalomhoz

Div hátterének megváltoztatása egy másik div hover eseményére

Susyking · 2013. Feb. 10. (V), 19.42
A problémám az, hogy a navigációs részben van két divem. Az egyikben nyomógombok, a másikban a nyomógombhoz tartozó képi elemnek kellene megjelenni.
Meg lehet változtatni egyáltalán a másik div background-image beállítását?
‹ Chrome: lábléc alatti rés JS Stack? ›
 ■
1

CSS-sel, ha a

Poetro · 2013. Feb. 10. (V), 19.58
CSS-sel, ha a megváltoztatandó a hover-ezett gyereke. Egyébként marad a JavaScript.
2

Class-al nem lehetne valamit varázsolni?

Susyking · 2013. Feb. 10. (V), 20.15
  1. <nav>  
  2.     <div id="infopanel">  
  3.         <!-- A styles.css-ben kap értékeket !-->  
  4.     </div>  
  5.     <div id="gomb1">  
  6.         <p class="gomb_p">1</p>  
  7.     </div>  
  8.     <div id="gomb2">  
  9.         <p class="gomb_p">2</p>  
  10.     </div>  
  11.     <div id="gomb3">  
  12.         <p class="gomb_p">3</p>  
  13.     </div>  
  14.     <div id="gomb4">  
  15.         <p class="gomb_p">4</p>  
  16.     </div>  
  17.     <div id="gomb5">  
  18.         <p class="gomb_p">5</p>  
  19.     </div>  
  20.     <div id="gomb6">  
  21.         <p class="gomb_p">6</p>  
  22.     </div>  
  23.       
  24. </nav>  
3

css

Susyking · 2013. Feb. 10. (V), 20.19
  1. #infopanel  {  
  2.     width: 380px;  
  3.     height: 130px;  
  4.     margin-left: 450px;  
  5.     background-image: url(../images/ip_fomenu.jpg);  
  6.     background-origin: content-box;  
  7.     background-repeat: no-repeat;  
  8.     background-size: 96%;  
  9. }  
  10.   
  11. #gomb1  {  
  12.     margin-left: 450px;  
  13.     padding-top: 5px;  
  14.     background-image: url(../images/gomb.jpg);  
  15.     background-origin: content-box;  
  16.     background-repeat: no-repeat;  
  17.     background-size: 67px 30px;  
  18.     padding-right: 20px;  
  19.     float:left;  
  20.     color: #454545;  
  21. }     
  22. #gomb2, #gomb3, #gomb4, #gomb5, #gomb6  {  
  23.     padding-top: 5px;  
  24.     background-image: url(../images/gomb.jpg);  
  25.     background-origin: content-box;  
  26.     background-repeat: no-repeat;  
  27.     background-size: 67px 30px;  
  28.     padding-right: 20px;  
  29.     float:left;  
  30.     color: #454545;  
  31. }     
  32. #gomb1:hover    {  
  33.     cursor: pointer;  
  34.     color: #C00;  
  35. }  
  36. #gomb2:hover {  
  37.     cursor: pointer;  
  38.     color: #C00;  
  39. }  
  40. ...  
4

Class-al nem lehetne valamit

Poetro · 2013. Feb. 10. (V), 20.46
Class-al nem lehetne valamit varázsolni?

Nem tudom mit szeretnél varázsolni, egyébként lehet.
5

Classt rátenni az infopanel div-re

Susyking · 2013. Feb. 10. (V), 21.20
Valami ilyesmire gondolok:

<div id="infopanel" class="infoclass">
<!-- A styles.css-ben kap értékeket !-->
</div>

a css-ben:

#infopanel {
width: 380px;
height: 130px;
margin-left: 450px;

background-origin: content-box;
background-repeat: no-repeat;
background-size: 96%;
}

.infoclass {
background-image: url(../images/ip_fomenu.jpg);
}

Csak azt nem tudom, hogy lehetne ezt változtatni a gomb(n) div hover eseménye alkalmával.
6

Vagy testvér kiválasztással,

Poetro · 2013. Feb. 10. (V), 21.38
Vagy testvér kiválasztással, vagy JavaScript. És kérlek tanuld meg szinezni a kódot.
7

Bocs a szinezésért!

Susyking · 2013. Feb. 10. (V), 22.08
Akkor marad a javascript.
Azzal sem bonyolult, csak megakartam oldani css segítségével. Elegánsabbnak tűnt.