.hoge {
width: 150px;
height: 150px;
background: red;
}
.hoge:hover {
background: blue;
}
small {
color: red;
/* .hoge:hover時にsmallを選択出来ない */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main>
<div class="hoge"></div>
</main>
<footer>
<small>.hogeと連動して文字色が変わる</small>
</footer>
var hoge = $(".hoge");
hoge.hover(
function() {
$(this).css({
"background": "blue",
"cursor": "pointer"
});
$("small").css("color", "blue");
},
function() {
$(this).css({
"background": "",
"cursor": "default"
});
$("small").css("color", "");
}
);
.hoge {
width: 150px;
height: 150px;
background: red;
}
.hoge {
background: red;
}
small {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main>
<div class="hoge"></div>
</main>
<footer>
<small>.hogeと連動して文字色が変わる</small>
</footer>
ただし、 hover
メソッドはマウスが要素に入ったとき、出たときの両方でイベントの設定が必要となる可能性があります。たとえば、 mouseleave
イベントのイベントハンドラで何もしていない場合、マウスが要素から外れても mouseenter
イベントで適用された装飾が残り続けます。
var settings = {
focusColor: "blue"
};
var hoge = $(".hoge");
hoge.hover(
function() {
$(this).css({
'background'"background": settings.focusColor,
'cursor'"cursor": 'pointer'"pointer"
});
},
function() {
// 何もしない
}
);
.hoge {
width: 150px;
height: 150px;
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hoge"></div>
「元の色」とは何かがわからないですが、質問文のコードは正常に動作しているように見えます。「マウスオーバー時に元の色 (ここでは赤) を表示したい」ならば、そもそも jQuery でのコードは不要です。もし「元の色」が赤や青でないならば、その色を css
メソッドの background
プロパティに設定する必要があります。
var settings = {
focusColor: "blue"
};
var hoge = $(".hoge");
hoge.hover(
function() {
$(this).css({
'background'"background": settings.focusColor,
'cursor'"cursor": 'pointer'"pointer"
});
},
function() {
$(this).css({
'background'"background": ''"",
'cursor'"cursor": 'default'"default"
});
}
);
.hoge {
width: 150px;
height: 150px;
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hoge"></div>