:hoverJavaScriptはCSSプロパティをどのように変更できますか？
例えば：
HTML
<table>
<tr>
<td>Hover 1</td>
<td>Hover 2</td>
</tr>
</table>
CSS
table td:hover {
background:#ff0000;
}
たとえば、 JavaScriptを使用してtd :hoverプロパティを変更するにはどうすればよいですか？background:#00ff00JavaScriptを使用してスタイルの背景プロパティにアクセスできることはわかっています。
document.getElementsByTagName("td").style.background="#00ff00";
.styleしかし、私はに相当するJavaScriptを知りません:hover。
のような疑似クラス: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);
Javascriptを使用して実際のセレクターを変更または変更することはできません。:hoverただし、を使用mouseenterしてスタイルを変更し、元に戻すことはできますmouseleave（ありがとう、@ Bryan）。
できることは、オブジェクトのクラスを変更し、ホバープロパティが異なる2つのクラスを定義することです。例えば：
.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変数が広くサポートされるようになったため、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');
});
目的に合っている場合は、cssを使用せずonmouseoverにJavaScriptでイベントを使用せずにホバー機能を追加できます
これがコードスニペットです
<div id="mydiv">foo</div>
<script>
document.getElementById("mydiv").onmouseover = function()
{
this.style.backgroundColor = "blue";
}
</script>
これは実際にはセルに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」に設定する必要があります。
デバイスがタッチをサポートしていることを検出したときに、すべての: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');
}
}
}
}
}
}
マウスイベントを使用して、ホバーのように制御できます。たとえば、次のコードは、その要素にカーソルを合わせると表示されます。
var foo = document.getElementById("foo");
foo.addEventListener('mouseover',function(){
foo.style.display="block";
})
foo.addEventListener('mouseleave',function(){
foo.style.display="none";
})
私は一度この必要性があり、CSSドキュメントを維持するための小さなライブラリを作成しました
https://github.com/terotests/css
それであなたは述べることができます
css().bind("TD:hover", {
"background" : "00ff00"
});
上記の手法を使用し、クロスブラウザの問題にも対処しようとします。何らかの理由でIE9のような古いブラウザが存在する場合、古いIEブラウザにはページで使用可能なSTYLEタグの数にこの奇妙な制限があったため、STYLEタグの数が制限されます。
また、タグを定期的に更新するだけで、タグへのトラフィックを制限します。アニメーションクラスの作成も制限付きでサポートされています。
グローバル変数を宣言します。
var td
次に、それらすべてを変更したい場合は、<td>それを取得するあなたのギュイエンヌ豚を選択しますid
window.onload = function () {
td = document.getElementsByTagName("td");
}
トリガーされる関数と、必要なすべてのを変更するループを作成しtdます
function trigger() {
for(var x = 0; x < td.length; x++) {
td[x].className = "yournewclass";
}
}
CSSシートに移動します。
.yournewclass:hover { background-color: #00ff00; }
これで、cssの適切性を直接変更する（cssクラスを切り替える）ことで、ホバーしたときにすべての<td>タグを取得できるようになります。background-color: #00ff00;
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);
}
そして、bam、いくつかのCSSと2つのJS関数を必要とするソリューションです！
私はホバーについて研究していました。ボタンラベルにそれらを実装してホバー効果を出すことができるようにするために、それがあなたのために働くことを願っています
<button
type="submit"
style=" background-color:cornflowerblue; padding:7px; border-radius:6px"
onmouseover="this.style.cssText ='background-color:#a8ff78; padding:7px; border-radius:6px;'"
onmouseout="this.style.cssText='background-color:cornflowerblue; padding:7px; border-radius:6px'"
@click="form1()"
>Login</button>同じ問題がいくつかあり、イベント「mousenter」、「mouseleave」にaddEventListenerを使用しました。
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はさまざまな方法で選択できます。
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で接続する必要があります
軽量のhtmluxlangを使用する場合は、ここで例を確認し、次のように記述します。
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,
}
},
})