Forum PHP.pl > [CSS][JQUERY] mouseover i display block

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS][JQUERY] mouseover i display block

corvus606

20.01.2012, 03:10:03

Mam coś takiego:

[JAVASCRIPT] pobierz, plaintext 
$("body").delegate('tr','mouseover mouseleave', function(e){
    if (e.type == 'mouseover') {
        $(this).addClass('hover');
    } else {
        $(this).removeClass('hover');
    }
});
[JAVASCRIPT] pobierz, plaintext

I coś takiego:

[HTML] pobierz, plaintext 
<table>
<tr onClick="location.href='costam.php';">
<td><p></p></td>
<td><p></p></td>
</tr>
 
<tr onClick="location.href='costam2.php';">
<td><p></p></td>
<td><p></p></td>
</tr>
</tr>
</table> 
[HTML] pobierz, plaintext

I na koniec coś takiego:

[CSS] pobierz, plaintext 
tr.hover{
    list-style-type: none;
 
 
    text-align:center;
 
    text-decoration: none;
 
 
    width: auto;
    display: block;
 
	background-color: #FAFAFA;
 
	border-style: solid;
    border-bottom-color: #333333;
    border-right-color: #555555;
    border-left-color: #BBBBBB;
    border-top-color: #DDDDDD;
 
	border-width: 2px;
 
 
 
}
[CSS] pobierz, plaintext

Problem polega na tym, że kiedy nakierowywuję myszką na dany wiersz to z powody display:block tenże wiersz próbuje zająć szerokość pojedynczej komórki wiersza poniżej. Bez display:block z kolei nie działają polecenia css typu border-bottom itd.
Nie potrafię wyjść z tego problemu...

lobopol

20.01.2012, 07:55:59

1. Nie mam pojęcia z czym masz problem http://jsfiddle.net/zc87s/
2. Na diabła do zmiany stylu potrzebujesz tam jQuery

corvus606

20.01.2012, 12:22:31

1. Mam jakiś idiotyczny problem - wpisuję to w tej postaci:

[HTML] pobierz, plaintext 
<html>
<head>
<style type="text/css">
td {padding:5px;}
tr {border:1px solid}
tr:hover{border-bottom:1px solid #fff}
</style>
</head>
<body>
<table>
    <tr>
        <td>aaaa</td>
        <td>aaaa</td>
    </tr>
    <tr>
        <td>aaaa</td>
        <td>aaaa</td>
    </tr>
    <tr>
        <td>aaaa</td>
        <td>aaaa</td>
    </tr>
</table>
</body>
</html>
[HTML] pobierz, plaintext

i odmawia współpracy, kiedy te własności dotyczą <tr> (działa kiedy zmieniam wszystko na <td>). Prawdopodobnie coś bardzo głupiego, tym niemniej nie mogę tego przeskoczyć...
2. IE?

D3X

20.01.2012, 13:26:35

corvus606, IE od wersji 7 obsługuje :hover poprawnie. Nie sądzę, żeby wspieranie IE6 miało jakikolwiek sens.
Przy okazji: nadawanie atrybutów onclick w html jest brzydkie. Masz jQuery, możesz użyć .on('click'), a w starszych wersjach .click() albo .bind('click').

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.