Идеи для контура строки таблицы при наведении? CSS наброски терпят неудачу на tr в Webkit - PullRequest
Новая
       21

Идеи для контура строки таблицы при наведении? CSS наброски терпят неудачу на tr в Webkit

1 голос
/ 24 декабря 2009

Я пытаюсь построить таблицу (заполненную фактическими табличными данными) и получить эффект контура для строки при наведении курсора. Я попробовал пару идей, но проблемы с кроссбраузерным движением сдерживают меня. Хотелось бы услышать любые идеи.

Идея # 1 : Добавить CSS outline при наведении курсора на

. Работает в IE8 и FF3, но не в IE7 или Chrome (Webkit, так что, вероятно, Safari тоже). Фактическая реализация наведения не приведена для краткости: 
<table style="margin:10px;width:800px">
    <tbody>
        <tr style="outline:red solid 3px">
            <td>Test 1</td>
            <td>Test 2</td>
        </tr>
    </tbody>
</table>

Идея # 2 : поместите

под , который шире / выше , и используйте z-index, чтобы сложить
ниже , но поверх соседних с. Это гораздо интереснее, потому что я потенциально могу делать закругленные углы, прозрачность и т. Д. Это выглядело многообещающе, но так же, как и многие идеи, когда они впервые были реализованы в Firefox. После прочтения z-index и игры с кодом в нескольких различных браузерах я полностью разочарован. Сложившаяся / упорядоченная структура, которую я здесь пробую, может быть слишком сложной для работы в разных браузерах.

Пример кода с использованием jquery-ui и Position (http://wiki.jqueryui.com/Position):

[ссылка на нерабочий код удалена]

<ч /> РЕДАКТИРОВАТЬ : Супер крутое, слегка клудгиш решение ниже, включая непрозрачность и закругленные углы во всех, кроме IE. На днях мне придется написать рецензию на блог по всем маленьким вопросам.

Ответы [ 3 ]

1 голос
/ 25 декабря 2009

Я создал идею №2, которая, на мой взгляд, довольно изящна. Несколько трюков пришлось использовать. Во-первых, блочные элементы нужно было поместить в элементы td, чтобы z-index работал в нескольких браузерах. Я использовал span элементы с display:block для заполнения всего td, что означает, что некоторые свойства td css должны быть помещены внутри этих span элементов и далее вложенных, но еще не добавленных span элементов (границ и прокладки, в частности).

Я добавил непрозрачность и закругленные углы (в IE нет закругленных углов). Не стесняйтесь комментировать, если у вас есть предложения по улучшению.

См. Код, работающий по адресу: http://davidmarble.com/code/tr-hover-highlight.html

0 голосов
/ 16 ноября 2011

Это решение, которое я придумал, задав собственный вопрос о SO - Строка таблицы контуров при наведении

То, что вы делаете, это удаляет нижнюю границу для всех тд с помощью bottom-border: 0. Верхние границы других ячеек сохранят все, как они должны выглядеть, за исключением последнего ряда. Последний ряд мы исправляем с помощью tr:last-child td { bottom-border: your border style }. Наконец, в псевдоклассе при наведении курсора вы устанавливаете нижнюю границу.

http://jsfiddle.net/S9pkM/16/

table { border-collapse: collapse; } /*I am aware of separate */
table td { border: 1px solid black; width: 50px; height: 25px; padding: 5px; border-bottom: 0; }
table tr:last-child td { border-bottom: 1px solid black; }
table tr:hover td { border-top-color: red; border-bottom: 1px solid red; }
table tr:hover td:first-child { border-left-color: red; }
table tr:hover td:last-child  { border-right-color: red; }
0 голосов
/ 24 декабря 2009

2 звучит ужасно сложно. Как насчет этого: 

tr:hover td{ outline: red solid 3px}

EDIT

Попробуйте это: 

<script type="text/javascript"> 
 $(document).ready(function(){ 
 $("tr").hover( 
 function(){ 
  $(this).css({"outline":"red solid 3px"}); 
 }, 
 function(){ 
  $(this).css({"outline":"red solid 0px"}); 
 }   
 ); 
 }); 
</script>

Упс .. это все равно не работает в вебките.

EDIT

ОК, попробуйте еще раз ...

Webkit соблюдает TR OUTLINE , если вы дадите TR "display: block", то есть работает следующее: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<title>Test</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css">
table {

}
tr {
    outline-color: #f00;
    outline-style: solid;
    outline-width: 0px;
    display: block
}
.thick {
    outline-width:3px;
}
</style>
<script type="text/javascript">
     $(document).ready(function(){
       $("td").hover(
       function(){
         $(this).parent().addClass("thick");
       },
       function(){
         $(this).parent().removeClass("thick");
       }  
       );
     });
    </script>
</head>
<body>
<table style="margin:10px;width:800px">
    <tbody>
        <tr>
            <td>Test 1</td>
            <td>Test 2</td>
        </tr>
        <tr>
            <td>Test 3</td>
            <td>Test 4</td>
        </tr>
    </tbody>
</table>
</body>
</html>
...