Беда с наследованием CSS - PullRequest
Новая
       15

Беда с наследованием CSS

0 голосов
/ 07 января 2010

У меня проблемы с моим стилем CSS. В настоящее время у меня есть что-то вроде этого: 

table tbody tr:hover { background-color: #5A5A5A; color: #F9F9F9;}

После этого я обнаружил, что мне нужно где-нибудь столик без наведения. Так что я продолжаю и использую это для overide: 

.image-result  tr:hover { background-color: #FFF; }

но, к сожалению, это ничего не делает на TR.

Можете ли вы предложить, что мне делать? 

        <div id="image-box">
            <div>
                <span>Search Image: </span>
                <%= Html.TextBox("img-search") %>
                <%= Html.Hidden("img-submitto", Url.Action("photopicker", "ajax"))%>
                <button id="img-submit">Search</button>
            </div>
            <div class="image-result">
 <table>
     <tbody><tr>
            <td>c</td>
            <td>c</td>
           </tr>
    </tbody>
</table>
                </div>
            </div>

Ответы [ 4 ]

2 голосов
/ 07 января 2010

По существу, чем конкретнее селектор, тем выше приоритет, который браузер будет отдавать при применении правил для этого стиля. Ваше первое правило более конкретное, поэтому имеет более высокий приоритет, поэтому стиль не применяется. Вы можете сделать это: 

.image-result  tr:hover { background-color: #FFF !important; }

для увеличения приоритета. Как правило, это не рекомендуемый подход, поскольку его можно (с некоторым обоснованием) рассматривать как решение реальной проблемы. Возможно, лучшим решением будет сделать новое правило, по крайней мере, таким же конкретным, как и другое: 

table.image-result tbody tr:hover { background: #FFF; }
1 голос
/ 07 января 2010

попробуйте использовать 

.image-result tr:hover td { background-color:#fff; }
1 голос
/ 07 января 2010

Попробуйте это более конкретное. 

div.image-result table tbody tr:hover { background-color: #FFF; 
                                    color: theDefaultColor;}

Обновление: Я пробовал, и это работает на FF и IE8, не проверено на других, но должно работать. Тем не менее, вам нужно будет добавить другие стили, особенно «цвет» для класса, тем более, что для этого потребуется оригинальная парочка.

Обновление 2 : изменено на основе кода ОП.

Вот код , который я использовал: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
table tbody tr:hover { background-color: #5A5A5A; color: #F9F9F9;}
div.image-result table tbody tr:hover { background-color: #FFF; color: #000000;}
</style>
</head>
<body>
<div>
<table id="myTable" border="1">
<tbody>
<tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
</tr>
</tbody>
</table>
</div>
<div class="image-result">
<table id="myTable2" border="1">
<tbody>
<tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
0 голосов
/ 07 января 2010

Ваш второй будет признан менее специфичным селектором, чем первый. Попробуйте сделать это более конкретно: 

table.image-result tbody tr:hover { background-color: #FFF; }

(поместить класс изображения-результата везде, где он фактически применяется).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...