Как отключить эффект зависания из файла css?

Как отключить эффект зависания от файла css и получить второй атрибут зависания `CSS-файла для работы с элементом html.Как отключить эффект зависания из файла css?

Html -

<p> 
    <a href="" title="">demo hover</a> 
</p>

style.css

a:hover{ 
    color:#000; 
    background: #ccc; 
    border:none; 
    /*Here can be more styling*/ 
}

style_new.css

a:hover{ 
    color:green; 
    background: #ccc; 
    border:none; 
    padding:4px; 
    /*Here can be more styling*/ 
}

Теперь в соответствии с вышесказанным Код Я хочу, чтобы эффект зависания style.css был отключен. Обратите внимание, что я не могу изменить style.css.

источник

2015-08-20 Mukul Kant

вы можете использовать 'родитель-child' или' nesting' для определения только ': hover' эффект, который вы хотите для любого конкретного' DOM' элемента, и всегда ставил свой обычай 'таблицы стилей 'после значения по умолчанию. – vivekkupadhyay

Вы можете добавить класс в свою разметку? – Danield

@ Danield nope, я не могу –

-2

Просто убедитесь, что style_new.css добавлен в послеstyle.css. HTML и CSS «читаются» сверху вниз, а это означает, что независимо от того, какой CSS появился после первого, будет отменен первый CSS.

Если это не работает, дают aclass или id, которые вы можете настроить таргетинг в вашем style_new.css.

источник

2015-08-20 08:59:15 Rvervuurt

, если я пойду с вашим ответом, тогда вывод будет заключаться в том, что оба стили css будут применяться к элементу, который получается, как вы говорите сверху вниз, но я спрашиваю о том, как отключить? –

Вы не можете отключить, и это действительно не имеет значения, если вы отключите или нет. В тег 'a' добавлен только один стиль, и это последний. – Rvervuurt

извините, но я не удовлетворен с вами. Если у вас есть «анимация», «позиция» и т. Д., То что. –

Это зависит от последовательности загрузки css, последняя всегда эффективна. Просто положить новый стиль после того, как старый будет в порядке.

cascading-order

style.css

a:hover{ 
    color:#000; 
    background: #ccc; 
    border:none; 
    /*Here can be more styling*/ 
}

style_new.css

a:hover{ 
    color:green; 
    background: #ccc; 
    border:none; 
    padding:4px; 
    /*Here can be more styling*/ 
}

источник

2015-08-20 09:03:17 rubyu2

Вы правы на самом деле, но я хочу сказать, как отключить только стиль наведения только из файла css? –

Возможно, вы могли бы написать один css-файл для нового атрибута hover и, наконец, импортировать его. Таким образом, вам не нужно импортировать весь файл css или изменять последовательность загрузки файлов. – rubyu2

Да, я уже делаю это, но такой же результат –

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

a:hover { 
 
    color: #000; 
 
    background: #ccc; 
 
    border: none; 
 
    /*Here can be more styling*/ 
 
} 
 
a:hover { 
 
    color: green; 
 
    background: #ccc; 
 
    border: none; 
 
    padding: 4px; 
 
    /*Here can be more styling*/ 
 
}

<p> 
 
    <a href="" title="">demo hover</a> 
 
</p>

Если вы не можете быть уверены в том порядке правил, вы должны увеличить специфичность нового правила.

Концепция

Специфичность является средством, с помощью которого браузер решает, какое CSS свойство значения является наиболее релевантными для элемента и, следовательно, будет применяться . Специфика основана только на правилах сопоставления, которые являются , состоящими из селекторов css разных сортов.

Как это рассчитывается?

Специфика - это вес, который применяется к данному объявлению CSS на основе количества каждого типа селектора.В случае специфичности равенства, последнее объявление, найденное в CSS, применяется к элементу . Специфичность применяется только при таргетинге одного и того же элемента. Правила CSS, которые непосредственно нацелены на элемент, всегда будут иметь приоритет над правилами, которые элемент наследует от предка.

p a:hover { 
 
    color: green; 
 
    background: #ccc; 
 
    border: none; 
 
    padding: 4px; 
 
    /*Here can be more styling*/ 
 
} 
 
a:hover { 
 
    color: #000; 
 
    background: #ccc; 
 
    border: none; 
 
    /*Here can be more styling*/ 
 
}

<p> 
 
    <a href="" title="">demo hover</a> 
 
</p>

Ссылка: MDN - Specificity - w3.org - Cascading order

источник

2015-08-20 09:11:19 emmanuel

-1

Просто сделайте стили style_new.css важными. он автоматически переопределит стили style.css. для например:

style.css

a:hover{ 
    color:#000; 
    background: #ccc; 
    border:none; 
    }

style_new.css

a:hover{ 
    color:green !important; 
    background: #ccc !important; 
    border:none !important; 
    padding:4px !important; 
}

источник

2015-08-21 07:04:42

Лучше избегать указания [! Important] (https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#The_!important_exception) использования. – emmanuel

Я хотел бы предложить вместо отключения :hover, установите свойство элемента такой же, как :active, :visited , :linked.

например:

a.mylink{ color:#000; text-decoration:none; cursor: default; }

источник

2015-12-23 09:47:51

Как отключить эффект зависания из файла css?

ответ

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