Html, css: Изменение границы строки в строке на hover

-1

Я использую DataTables, и я пытаюсь изменить верхнюю и нижнюю границу строки на красный при наведении строки. Следующее не изменило цвет.Html, css: Изменение границы строки в строке на hover

table.dataTable.hover tbody tr:hover, 
table.dataTable.hover tbody tr.odd:hover, 
table.dataTable.hover tbody tr.even:hover, 
table.dataTable.display tbody tr:hover, 
table.dataTable.display tbody tr.odd:hover, 
table.dataTable.display tbody tr.even:hover { 
    background-color: rgba(209, 231, 255, 0.5); 
    border-bottom: 1px solid red; 
    border-top: 1px solid red; 
}

Кто-нибудь знает, как правильно это сделать? jsfiddle: http://jsfiddle.net/d1zqsayh/

источник

2014-10-05 rez

Мы должны видеть HTML, а также. – Shomz

Как выглядит ваш HTML-код? Пожалуйста, опубликуйте его и сделайте jsfiddle. –

@Shomz @i встревоженный иностранец http://jsfiddle.net/d1zqsayh/ – rez

Вы можете сделать что-то вроде этого:

table.dataTable tbody tr td{ 
    border-bottom: 1px solid transparent; 
} 

table.dataTable tbody tr:hover td { 
    border-top: red 1px solid; 
    border-bottom: red 1px solid; 
}

Посмотри здесь: http://jsfiddle.net/d1zqsayh/21/

источник

2014-10-05 15:04:12 Shomz

если я использую 'table.dataTable tbody tr td { border-top: 1px solid transparent; border-bottom: 1px сплошная прозрачная; } Мои старые границы исчезли, и если я этого не сделаю, мои строки перемещаются странно – rez

Ах, извините, используйте только нижний край и верх и низ для зависания. http://jsfiddle.net/d1zqsayh/21/ – Shomz

oh wow, что сводило меня с ума :) Большое спасибо – rez

вы не можете установить границу на TR попробовать это

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<style> 


    .redrow td:hover{ 
    border-bottom: 1px solid red; 
    border-top: 1px solid red; 
    } 
</style> 

</HEAD> 

<BODY> 
    <TABLE> 
    <TR class="redrow"> 
    <TD>dsfsdfs</TD> 
    </TR> 
    </TABLE> 
</BODY> 
</HTML>

источник

2014-10-05 14:52:45

Это изменит границу одной ячейки. – JJJ

я забыл добавить td попробовать снова сейчас :) –

Это все равно изменит границу только одной ячейки. – JJJ

Вы можете 'установите границу на tr, поэтому вам нужно установить ее на элементах td.

Во-первых, установить состояние по умолчанию с «невидимыми» границ - это правило будет применяться к таблицам с классами dataTable и hover:

.dataTable.hover td { 
    border: 1px solid inherit; 
}

Теперь задающих красный верхний и нижний пределы, когда строка колебались:

.dataTable.hover tr:hover td { 
    border-top: 1px solid red; 
    border-bottom: 1px solid red; 
}

JSFiddle

в общем, лучше не указывать слишком много селекторов, когда Setti ng css. Ваши селекторы очень специфичны и могут быть заменены более короткими утверждениями, например.

.dataTable tr:hover td { 
    background-color: rgba(209, 231, 255, 0.5); 
    border-bottom: 1px solid red; 
    border-top: 1px solid red; 
}

вместо table.dataTable tbody tr.even:hover td и т.д.

источник

2014-10-05 15:04:24

Почему это делает строки таблицы неудобно? – rez

Поскольку граница добавляется к элементам. Одна из ранних деклараций стиля переопределяет объявление границы '.dataTable.hover td' и появляется только верхняя граница. Как я уже сказал, лучше не указывать слишком много селекторов при настройке правил, потому что вы можете сделать объявление очень специфичным, что делает его очень трудно переопределить, не используя что-то вроде '! important'. –

Можно с атрибутом границы коллапса:

table, th, td { 
    border-collapse: collapse; 
}

Полный код: http://jsfiddle.net/hkmgk3uf/

источник

2014-10-05 15:17:21 bigmaster

Html, css: Изменение границы строки в строке на hover

ответ

Смежные вопросы