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
        <nav>
            <div id="infopanel">
            	<!-- A styles.css-ben kap értékeket !-->
            </div>
            <div id="gomb1">
            	<p class="gomb_p">1</p>
            </div>
            <div id="gomb2">
            	<p class="gomb_p">2</p>
            </div>
            <div id="gomb3">
            	<p class="gomb_p">3</p>
            </div>
            <div id="gomb4">
            	<p class="gomb_p">4</p>
            </div>
            <div id="gomb5">
            	<p class="gomb_p">5</p>
            </div>
            <div id="gomb6">
            	<p class="gomb_p">6</p>
            </div>
            
        </nav>
3

css

Susyking · 2013. Feb. 10. (V), 20.19
#infopanel	{
	width: 380px;
	height: 130px;
	margin-left: 450px;
	background-image: url(../images/ip_fomenu.jpg);
	background-origin: content-box;
	background-repeat: no-repeat;
	background-size: 96%;
}

#gomb1	{
	margin-left: 450px;
	padding-top: 5px;
	background-image: url(../images/gomb.jpg);
	background-origin: content-box;
	background-repeat: no-repeat;
	background-size: 67px 30px;
	padding-right: 20px;
	float:left;
	color: #454545;
}	
#gomb2, #gomb3, #gomb4, #gomb5, #gomb6	{
	padding-top: 5px;
	background-image: url(../images/gomb.jpg);
	background-origin: content-box;
	background-repeat: no-repeat;
	background-size: 67px 30px;
	padding-right: 20px;
	float:left;
	color: #454545;
}	
#gomb1:hover	{
	cursor: pointer;
	color: #C00;
}
#gomb2:hover {
	cursor: pointer;
	color: #C00;
}
...
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.