Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS][JQUERY] mouseover i display block
corvus606
post
Post #1





Grupa: Zarejestrowani
Postów: 33
Pomógł: 0
Dołączył: 12.11.2011

Ostrzeżenie: (0%)
-----

Mam coś takiego:

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


I coś takiego:

[HTML] pobierz, plaintext 
  1. <table>
  2. <tr onClick="location.href='costam.php';">
  3. <td><p></p></td>
  4. <td><p></p></td>
  5. </tr>
  6.  
  7. <tr onClick="location.href='costam2.php';">
  8. <td><p></p></td>
  9. <td><p></p></td>
  10. </tr>
  11. </tr>
  12. </table> 
[HTML] pobierz, plaintext


I na koniec coś takiego:
[CSS] pobierz, plaintext 
  1. tr.hover{
  2.     list-style-type: none;
  3.  
  4.  
  5.     text-align:center;
  6.  
  7.     text-decoration: none;
  8.  
  9.  
  10.     width: auto;
  11.     display: block;
  12.  
  13. 	background-color: #FAFAFA;
  14.  
  15. 	border-style: solid;
  16.     border-bottom-color: #333333;
  17.     border-right-color: #555555;
  18.     border-left-color: #BBBBBB;
  19.     border-top-color: #DDDDDD;
  20.  
  21. 	border-width: 2px;
  22.  
  23.  
  24.  
  25. }
[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...

Ten post edytował corvus606 20.01.2012, 03:16:44
Go to the top of the page
+Quote Post
lobopol
post
Post #2





Grupa: Zarejestrowani
Postów: 1 729
Pomógł: 346
Dołączył: 4.04.2009

Ostrzeżenie: (0%)
-----

1. Nie mam pojęcia z czym masz problem http://jsfiddle.net/zc87s/
2. Na diabła do zmiany stylu potrzebujesz tam jQuery
Go to the top of the page
+Quote Post
corvus606
post
Post #3





Grupa: Zarejestrowani
Postów: 33
Pomógł: 0
Dołączył: 12.11.2011

Ostrzeżenie: (0%)
-----

1. Mam jakiś idiotyczny problem - wpisuję to w tej postaci:
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. td {padding:5px;}
  5. tr {border:1px solid}
  6. tr:hover{border-bottom:1px solid #fff}
  7. </style>
  8. </head>
  9. <body>
  10. <table>
  11.     <tr>
  12.         <td>aaaa</td>
  13.         <td>aaaa</td>
  14.     </tr>
  15.     <tr>
  16.         <td>aaaa</td>
  17.         <td>aaaa</td>
  18.     </tr>
  19.     <tr>
  20.         <td>aaaa</td>
  21.         <td>aaaa</td>
  22.     </tr>
  23. </table>
  24. </body>
  25. </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?
Go to the top of the page
+Quote Post
D3X
post
Post #4





Grupa: Zarejestrowani
Postów: 4
Pomógł: 0
Dołączył: 21.05.2006

Ostrzeżenie: (0%)
-----

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').
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 23.08.2025 - 00:39
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn