hover impostare bordo

andreahrc

Utente Attivo
24 Gen 2013
57
0
0
salve ho questo e mi funziona
Codice:
table.annunci tr.pari:hover
{
background: gold;

}
però io vorrei cambiare il colore del bordo al passaggio del mouse ma non mi prende questo:
Codice:
table.annunci tr.pari:hover
{
border: gold;

}
come fare?
 

Jonn

Utente Attivo
29 Dic 2012
352
3
18
Pistoia
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Documento senza titolo</title>
<style type="text/css">
<!--
table:hover		{border:5px solid #00FF00;}
tr.pari:hover td	{border:1px solid #FF0000;}
tr.dispari:hover td	{border:1px solid #0000FF;}
-->
</style></head>

<body>
<table>
  <tr  class="dispari">
    <td>dispari 1</td>
    <td>dispari 2</td>
    <td>dispari 3</td>
  </tr>
  <tr class="pari">
    <td >pari 1</td>
    <td >pari 2</td>
    <td >pari 3</td>
  </tr>
  <tr class="dispari">
    <td>dispari 4</td>
    <td>dispari 5</td>
    <td>dispari 6</td>
  </tr>
  <tr class="pari">
    <td>pari 4</td>
    <td>pari 5</td>
    <td>pari 6</td>
  </tr>
</table>
</body>
</html>

Questo funziona, l'unica pecca è che ovviamente non puoi non visualizzare il bordo tra una cella e l'altra orizzontalmente (come immagino ti aspettassi).
Fammi risapere
 
Ultima modifica:

andreahrc

Utente Attivo
24 Gen 2013
57
0
0
Questo funziona, l'unica pecca è che ovviamente non puoi non visualizzare il bordo tra una cella e l'altra orizzontalmente (come immagino ti aspettassi).
Fammi risapere

infatti si vede il bordo di tutte le celle invece io vorrei avere solo il perimetro della riga, inoltre come ci passo sopra il mouse riaggiusta il layout dunque con il pixel del bordo fa un effetto movimento del testo che non mi piace
 

Jonn

Utente Attivo
29 Dic 2012
352
3
18
Pistoia
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Righe Pari Rosso, Dispari Blu</title>
<style type="text/css">
<!--
table				{border:5px solid #00FF00;}
tr.pari td			{border:1px solid #FFFFFF;}
tr.pari:hover td.pari1		{border-bottom:1px solid #FF0000; border-top:1px solid #FF0000; border-left:1px solid #FF0000;}
tr.pari:hover td.pari2		{border-bottom:1px solid #FF0000; border-top:1px solid #FF0000;}
tr.pari:hover td.pari3		{border-bottom:1px solid #FF0000; border-top:1px solid #FF0000; border-right:1px solid #FF0000;}
tr.pari:hover td.pari4		{border-bottom:1px solid #FF0000; border-top:1px solid #FF0000; border-left:1px solid #FF0000;}
tr.pari:hover td.pari5		{border-bottom:1px solid #FF0000; border-top:1px solid #FF0000;}
tr.pari:hover td.pari6		{border-bottom:1px solid #FF0000; border-top:1px solid #FF0000; border-right:1px solid #FF0000;}

tr.dispari td			{border:1px solid #FFFFFF;}
tr.dispari:hover td.dispari1	{border-bottom:1px solid #0000FF; border-top:1px solid #0000FF; border-left:1px solid #0000FF;}
tr.dispari:hover td.dispari2	{border-bottom:1px solid #0000FF; border-top:1px solid #0000FF;}
tr.dispari:hover td.dispari3	{border-bottom:1px solid #0000FF; border-top:1px solid #0000FF; border-right:1px solid #0000FF;}
tr.dispari:hover td.dispari4	{border-bottom:1px solid #0000FF; border-top:1px solid #0000FF; border-left:1px solid #0000FF;}
tr.dispari:hover td.dispari5	{border-bottom:1px solid #0000FF; border-top:1px solid #0000FF;}
tr.dispari:hover td.dispari6	{border-bottom:1px solid #0000FF; border-top:1px solid #0000FF; border-right:1px solid #0000FF;}


-->
</style></head>

<body>
<table width="500" cellspacing="0" cellpadding="0">
  <tr  class="dispari">
    <td class="dispari1">dispari 1</td>
    <td class="dispari2">dispari 2</td>
    <td class="dispari3">dispari 3</td>
  </tr>
  <tr class="pari" >
    <td class="pari1">pari 1</td>
    <td class="pari2">pari 2</td>
    <td class="pari3">pari 3</td>
  </tr>
  <tr class="dispari">
    <td class="dispari4">dispari 4</td>
    <td class="dispari5">dispari 5</td>
    <td class="dispari6">dispari 6</td>
  </tr>
  <tr class="pari">
    <td class="pari4">pari 4</td>
    <td class="pari5">pari 5</td>
    <td class="pari6">pari 6</td>
  </tr>
</table>
</body>
</html>

Qui rimane che tra una cella e l'altra si può notare lo stacco dei bordi sopra e sotto, ma meglio di così proprio non so cosa farti.
 

Jonn

Utente Attivo
29 Dic 2012
352
3
18
Pistoia
Comunque per un lavoro del genere con le div fai il solito lavoro in metà tempo e con più qualità.
Le tabelle oramai sono quasi abbandonate, servono solo per dati tabellari.

Se vuoi che te lo faccia con i DIV fammi sapere...
Ciau
 
Ultima modifica:

andreahrc

Utente Attivo
24 Gen 2013
57
0
0
Si il fatto è che io le div non le ho mai usate dunque non saprei da dove iniziare


inoltre...dato che a quanto pare te la cavi molto bene con i css, ho un input type text che non mi riesce di allinearlo verticalmente mi sai dire come vengono trattati dai css?
 

Jonn

Utente Attivo
29 Dic 2012
352
3
18
Pistoia
Basta che al tag input applichi una classe in css ti spiego:

HTML:
<input class="inputboxstyle" />

Mentre nel css ci metti:
Codice:
input.inputboxstyle {/*va bene anche se metti solo .inputboxstyle, basta il nome della classe in questo caso*/
		width:30px;   /*Che sarebbe la larghetta */
		height:15px; /*Che sarebbe l'altezza */
		vertical-align:text-bottom; /*Che come si decuce facilmente è l'allineamento verticale dell'elemento (quello che cerchi tu)*/
		border:2px solid #0066CC; /*che sono i parametri per i bordi della textbox*/}

La tua domanda non è per niente chiara ma spero che questa spiegazione ti possa bastare a risolvere il problema, anche perchè è la prima volta che ho a che fare con una textbox XD.

Se comunque qualcosa non ti torna inserisci più dettagli e vediamo cosa si può fare.

Ciau ^^
 

andreahrc

Utente Attivo
24 Gen 2013
57
0
0
Ok grazie mille di pomeriggio provo e ti do una risposta, adesso non posso perchè ho un problema di connessione al database dunque devo risolvere prima questo che mi rende il sito non raggiungibile infatti adesso apro un altro thread.ciao grazie
 
Discussioni simili
Autore Titolo Forum Risposte Data
P modifica colore A Hover link website . WordPress 2
amaranthinemess [HTML] :target e :hover HTML e CSS 5
Giacomo Boccherini [Javascript] [HTML] Hover Javascript 1
Andrea_Ventura [HTML] Problemi con effetto hover HTML e CSS 5
Sermatth72 [HTML] creare link con colori Hover diversi, possibile? HTML e CSS 6
U Hover su immagine escluso titolo - flexbox Presentati al Forum 0
U [HTML] Hover su immagine escluso titolo - flexbox HTML e CSS 3
S [HTML] Effetto hover in un div HTML e CSS 6
otto9due Lampeggiamento solo su .hover(), inizia ma non riesco a fermarlo! jQuery 2
otto9due .hover() perchè non va in questo caso? jQuery 2
greven [WordPress] [CSS3] Inserire Hover Effect sul menù WordPress 10
Papalla CSS3 - immagine di sfondo con elementi che appaiono col mouse hover HTML e CSS 4
F Problema hover voce di menù Javascript 2
A :hover HTML e CSS 5
M sottomenu all hover su voce contattaci jQuery 2
A Simulazione :hover su touch device Javascript 1
P Hover HTML e CSS 1
Shyson jQuery, togliere css hover jQuery 1
L Effetto hover con jquery jQuery 2
F mappa jquery con effetto hover + fancybox Javascript 1
F Come si chiama questo effetto hover? Javascript 1
H Problema hover img jQuery 6
steak [RISOLTO] Problema con 'a:hover' HTML e CSS 12
Shyson Mettere hover a css in linea HTML e CSS 1
P Effetto a:hover sempre attivo solo se si và su una voce del sottomenu HTML e CSS 1
A Stato di :hover su dispositivi Touch-Screen HTML e CSS 6
P Problema con hover div jQuery 2
Dexter_90 [AIUTO] Modificare proprieta Css tramite hover con Javascript Javascript 4
Dexter_90 [AIUTO] Modificare proprieta Css tramite hover HTML e CSS 4
S strano comportamento a:hover su immagine HTML e CSS 7
andre9004 Dropdown menu con .hover() jQuery 2
D Eventi: si possono modificare proprietà css di un el. B tramite un hover su un el. A? HTML e CSS 0
S [JQUERY] immagine che resta attiva all'hover jQuery 4
S Usare l'hover jQuery 4
F Arrotondare angoli hover HTML e CSS 3
D attivazione dei suoni all'hover in jQuery jQuery 0
voldemort jquery: live con hover jQuery 1
M Come utilizzare :hover senza documento .css HTML e CSS 4
davide1982 Problema animazione con animate e hover Javascript 4
I CSS - hover HTML e CSS 3
S link e hover con i css HTML e CSS 2
M problema con hover/visited menu HTML e CSS 2
F css: -moz-border-radius e :hover HTML e CSS 0
cerbero a:hover HTML e CSS 4
C Hover Cella HTML e CSS 2
S impostare un testo e una img nella stessa riga con jsPDF Javascript 0
K Impostare scala di proporzione (Indesign) Webdesign e Grafica 0
S Impostare attributo "onclick" Javascript 5
G Impostare suggerimenti campo text di un form Javascript 2
K [MySQL] Impostare Database MySQL 2

Discussioni simili