Изменение: наведите курсор на свойства CSS с помощью JavaScript
Мне нужно найти способ изменить свойства CSS:hover с помощью JavaScript.
Например, предположим, у меня есть этот HTML-код:
<table>
<tr>
<td>Hover 1</td>
<td>Hover 2</td>
</tr>
</table>
И следующий код CSS:
table td:hover {
background:#ff0000;
}
Я хотел бы использовать JavaScript, чтобы изменить свойства
document.getElementsByTagName("td").style.background="#00ff00";
Но я не знаю JavaScript-эквивалента для:hover. Как мне изменить фон
Ваша помощь очень ценится!
2012-07-07 01:2719 ответов
Псевдо-классы типа :hover никогда не ссылаться на элемент, но на любой элемент, который удовлетворяет условиям правила таблицы стилей. Вам нужно отредактировать правило таблицы стилей, добавить новое правило или добавить новую таблицу стилей, которая включает в себя новый :hover править.
var css = 'table td:hover{ background-color: #00ff00 }';
var style = document.createElement('style');
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
document.getElementsByTagName('head')[0].appendChild(style);
Вы не можете изменить или изменить фактическое :hover Селектор через Javascript. Вы можете, однако, использовать mouseenter изменить стиль и вернуться к mouseleave (спасибо, Брайан).
Довольно старый вопрос, поэтому я решил добавить более современный ответ. Теперь, когда переменные CSS широко поддерживаются, их можно использовать для достижения этой цели без необходимости в событиях JS или!important.
Взяв пример OP:
<table>
<tr>
<td>Hover 1</td>
<td>Hover 2</td>
</tr>
</table>
Теперь мы можем сделать это в CSS:
table td:hover {
// fallback in case we need to support older/non-supported browsers (IE, Opera mini)
background: #ff0000;
background: var(--td-background-color);
}
И добавьте состояние зависания, используя javascript, например:
const tds = document.querySelectorAll('td');
tds.forEach((td) => {
td.style.setProperty('--td-background-color', '#00ff00');
});
Вот рабочий пример https://codepen.io/ybentz/pen/RwPoeqb
Что вы можете сделать, это изменить класс вашего объекта и определить два класса с различными свойствами наведения. Например:
.stategood_enabled:hover { background-color:green}
.stategood_enabled { background-color:black}
.stategood_disabled:hover { background-color:red}
.stategood_disabled { background-color:black}
И это я нашел: Изменить класс элемента с помощью JavaScript
function changeClass(object,oldClass,newClass)
{
// remove:
//object.className = object.className.replace( /(?:^|\s)oldClass(?!\S)/g , '' );
// replace:
var regExp = new RegExp('(?:^|\\s)' + oldClass + '(?!\\S)', 'g');
object.className = object.className.replace( regExp , newClass );
// add
//object.className += " "+newClass;
}
changeClass(myInput.submit,"stategood_disabled"," stategood_enabled");
Извините, что обнаружил эту страницу с опозданием на 7 лет, но вот гораздо более простой способ решить эту проблему (произвольное изменение стилей наведения):
HTML:
<button id=Button>Button Title</button>
CSS:
.HoverClass1:hover {color: blue !important; background-color: green !important;}
.HoverClass2:hover {color: red !important; background-color: yellow !important;}
JavaScript:
var Button=document.getElementById('Button');
/* Clear all previous hover classes */
Button.classList.remove('HoverClass1','HoverClass2');
/* Set the desired hover class */
Button.classList.add('HoverClass1');
Если это соответствует вашим целям, вы можете добавить функцию наведения мыши, не используя css и не используя onmouseover событие в JavaScript
Вот фрагмент кода
<div id="mydiv">foo</div>
<script>
document.getElementById("mydiv").onmouseover = function()
{
this.style.backgroundColor = "blue";
}
</script>
Вы можете использовать события мыши для управления, например при наведении курсора. Например, следующий код становится видимым, когда вы наводите курсор на этот элемент.
var foo = document.getElementById("foo");
foo.addEventListener('mouseover',function(){
foo.style.display="block";
})
foo.addEventListener('mouseleave',function(){
foo.style.display="none";
})
Я бы порекомендовал заменить все :hover свойства к :active когда вы обнаружите, что устройство поддерживает сенсорный. Просто вызовите эту функцию, когда вы делаете так, как touch()
function touch() {
if ('ontouchstart' in document.documentElement) {
for (var sheetI = document.styleSheets.length - 1; sheetI >= 0; sheetI--) {
var sheet = document.styleSheets[sheetI];
if (sheet.cssRules) {
for (var ruleI = sheet.cssRules.length - 1; ruleI >= 0; ruleI--) {
var rule = sheet.cssRules[ruleI];
if (rule.selectorText) {
rule.selectorText = rule.selectorText.replace(':hover', ':active');
}
}
}
}
}
}
Это на самом деле не добавляет CSS в ячейку, но дает тот же эффект. Несмотря на то, что он дает тот же результат, что и выше, эта версия для меня немного более интуитивна, но я новичок, поэтому возьмите его по достоинству:
$(".hoverCell").bind('mouseover', function() {
var old_color = $(this).css("background-color");
$(this)[0].style.backgroundColor = '#ffff00';
$(".hoverCell").bind('mouseout', function () {
$(this)[0].style.backgroundColor = old_color;
});
});
Это требует установки класса для каждой из ячеек, которые вы хотите выделить, на "hoverCell".
Вы можете создать переменную CSS, а затем изменить ее в JS.
:root {
--variableName: (variableValue);
}
чтобы изменить это в JS, я сделал эти удобные маленькие функции:
var cssVarGet = function(name) {
return getComputedStyle(document.documentElement).getPropertyValue(name);
};
а также
var cssVarSet = function(name, val) {
document.documentElement.style.setProperty(name, val);
};
Вы можете создать столько переменных CSS, сколько захотите, и я не обнаружил никаких ошибок в функциях; После этого все, что вам нужно сделать, это встроить его в свой CSS:
table td:hover {
background: var(--variableName);
}
А потом бац, решение, которое требует лишь некоторых функций CSS и 2 JS!
У меня была эта потребность однажды и я создал небольшую библиотеку, которая поддерживает документы CSS
https://github.com/terotests/css
С этим вы можете заявить
css().bind("TD:hover", {
"background" : "00ff00"
});
Он использует методы, упомянутые выше, а также пытается решить кросс-браузерные проблемы. Если по какой-то причине существует старый браузер, такой как IE9, он ограничит количество тегов STYLE, потому что в более старом браузере IE было такое странное ограничение на количество тегов STYLE, доступных на странице.
Кроме того, он ограничивает трафик для тегов, обновляя теги только периодически. Существует также ограниченная поддержка для создания классов анимации.
Для себя нашел следующий вариант: с /questions/19191901/kak-nastroit-vvod-stil-fokusa-programmno-s-ispolzovaniem-javascript/61390618#61390618
Объявите глобальную переменную:
var td
Затем выберите свою свинку <td> получить его своим id, если вы хотите изменить их все, то
window.onload = function () {
td = document.getElementsByTagName("td");
}
Сделайте функцию для запуска и цикл, чтобы изменить все ваши желаемые td"s
function trigger() {
for(var x = 0; x < td.length; x++) {
td[x].className = "yournewclass";
}
}
Перейдите на свой лист CSS:
.yournewclass:hover { background-color: #00ff00; }
И это все, с этим вы можете сделать все ваши <td> теги получают background-color: #00ff00; когда зависает, напрямую изменяя свой css (переключение между классами css).
Были те же проблемы, использовал addEventListener для событий «mousenter», «mouseleave»:
let DOMelement = document.querySelector('CSS selector for your HTML element');
// if you want to change e.g color:
let origColorStyle = DOMelement.style.color;
DOMelement.addEventListener("mouseenter", (event) => { event.target.style.color = "red" });
DOMelement.addEventListener("mouseleave", (event) => { event.target.style.color = origColorStyle })
Или что-то еще для стиля, когда курсор находится над DOMelement.DOMElement можно выбрать разными способами.
const tds = document.querySelectorAll('td');
tds.forEach((td,index) => {
td.addEventListener("mouseover", ()=>hover(index))
td.addEventListener("mouseout", ()=>normal(index))
});
function hover(index){
tds[index].style.background="red";
}
function normal(index){
tds[index].style.background="yellow";
}
Попробуйте этот код, он будет работать нормально.
Я исследовал наведение, чтобы иметь возможность реализовать их в метке кнопки и сделать эффект наведения, надеюсь, это сработает для вас.
Вы можете создать класс в css
.hover:hover {
background: #ff0000;
}
а затем добавить его динамически
const columns = document.querySelectorAll('table td');
for (let i = 0; i < columns.length; i++) {
columns[i].classList.add('hover');
}
Но ваши файлы css и js должны быть подключены в index.html
Если вы используете легкий html ux lang, посмотрите здесь пример, напишите:
div root
.onmouseover = ev => {root.style.backgroundColor='red'}
.onmouseleave = ev => {root.style.backgroundColor='initial'}
Приведенный выше код выполняет метатег css:hover.
Этот сработал для меня
const useStyles = makeStyles({
mystyle:{
color: "red",
FontFace: "oblique"
},
yourStyle:{
backgroundColor:"green",
border:0,
color: 'white',
"&:hover":{
backgroundColor:"skyblue",
border:0,
}
},
})