- Home
- Categorie
- Coding e Sistemistica
- HTML e CSS
- Cambiare background al "contenitore" se si passa sopra il contenuto.
-
Cambiare background al "contenitore" se si passa sopra il contenuto.
Ragazzi, mi rifaccio vivo per un problema che mi assilla ormai
Allora, ho questo codice:
[html]<td width="100%" class="forum-buttons" colspan="3">
<a href="{FULL_SITE_PATH}{U_PORTAL}">{L_HOME}</a><img src="{FULL_SITE_PATH}{IMG_MENU_SEP}" alt="" />
<a href="{FULL_SITE_PATH}{U_INDEX}">{L_INDEX}</a><img src="{FULL_SITE_PATH}{IMG_MENU_SEP}" alt="" />
<!-- BEGIN switch_upi2db_off -->
<a href="{FULL_SITE_PATH}{U_SEARCH_NEW}">{L_NEW2}</a><img src="{FULL_SITE_PATH}{IMG_MENU_SEP}" alt="" />
<!-- END switch_upi2db_off -->
<!-- IF S_LOGGED_IN -->
<a href="{FULL_SITE_PATH}{U_PROFILE}">{L_PROFILE}</a><img src="{FULL_SITE_PATH}{IMG_MENU_SEP}" alt="" />
<!-- ENDIF -->
<!-- IF S_HEADER_DROPDOWN -->
<a href="{FULL_SITE_PATH}{U_SEARCH}" onmouseover="dropdownmenu(this,event,menu1,'250px')" onmouseout="delayhidemenu()">{L_SEARCH}</a> <img src="{FULL_SITE_PATH}{IMG_MENU_SEP}" alt="" />
<!-- ELSE -->
<a href="{FULL_SITE_PATH}{U_SEARCH}">{L_SEARCH}</a><img src="{FULL_SITE_PATH}{IMG_MENU_SEP}" alt="" />
<!-- ENDIF -->
<a href="{FULL_SITE_PATH}{U_FAQ}">{L_FAQ}</a><img src="{FULL_SITE_PATH}{IMG_MENU_SEP}" alt="" />
<!-- IF not S_LOGGED_IN -->
<a href="{FULL_SITE_PATH}{U_REGISTER}">{L_REGISTER}</a><img src="{FULL_SITE_PATH}{IMG_MENU_SEP}" alt="" />
<!-- ENDIF -->
<a href="{FULL_SITE_PATH}{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT2}</a><img src="{FULL_SITE_PATH}{IMG_MENU_SEP}" alt="" />
</td>[/html]E questo css per la classe forum-buttons:.forum-buttons { text-align: center; vertical-align: middle; font-size: 11px; font-weight: bold; height: 28px !important; color: #e8e8ee; background: #121720 url('images/p_blue/bg_forum-buttons.gif') no-repeat center top; overflow: hidden; } .forum-buttons a, .forum-buttons img { float: left; } .forum-buttons a, .forum-buttons a:visited { color: #023353; font-weight: bold; text-decoration: none; display: block; padding: 7px; } .forum-buttons a:hover, .forum-buttons a:active { color: #fff; } ```Allora, dovrei fare in modo che il background della tabella, quindi di **forum-buttons** si sposti quando passo sopra un link, ma solo nel link. Cioè, ora i link non hanno background, si vede quello della tabella, quando passo sopra, solo dietro al link in hover, devo spostare lo sfondo della tabella. In pratica deve fare da:
background: url('images/p_blue/bg_forum-buttons.gif') no-repeat center top;
background: url('images/p_blue/bg_forum-buttons.gif') no-repeat center bottom;
.forum-buttons:hover a:hover {
background: url('images/p_blue/bg_forum-buttons.gif') no-repeat center bottom;
}Potete vedere l'esempio qui: **hxtp://revontulet.altervista.org/** Come potete vedere dietro al link si vede sempre la stessa parte dello sfondo, mentre si dovrebbe vedere quella che si vede quando NON si è in :hover però più scura. Non so se si è capito il problema, in ogni caso grazie in anticipo ;)
-
Non è che ho capito proprio bene.. comunque per una animazione più complessa forse è meglio se ti affidi al javascript o al flash.. l'url da te postato non mi va... da errore di connessione al db... o che il server è sovraccarico..
-
Vorrei evitare di usare Javascript, ancora di meno Flash.
Vorrei fare tutto con il css, credo sia possibile, senza appoggiarmi a queste cose
E' strano che dia errore, ho messo hxtp perchè non posso inserire link diretti.
In pratica l'immagine di sfondo del menu è fatta in modo che passandoci sopra venga fatto il roll over.
Però farlo SOLO nel link in cui passo sopra.