いくつかのCSSスタイルをホバーの要素に適用する必要があり、DOM要素を別のページに挿入しているため、スタイルシートや$(this).addClass('someStyle')
ではなくjavascript/jqueryを直接使用してCSSスタイルを適用する必要があります。
を使用して通常のcssスタイルを適用できます
$('#some-content').css({
marginTop: '60px',
display: 'inline-block'
});
:hover
イベントにCSSスタイルを追加するにはどうすればよいですか?
次の手段に頼らなければなりませんか?
$('#some-content').hover(
function(){ $(this).css('display', 'block') },
function(){ $(this).css('display', 'none') }
)
Mouseenterとmouseleaveを使用すると、ホバーするよりも優れていることがわかります。より多くの制御があります。
$("#somecontent").mouseenter(function() {
$(this).css("background", "#F00").css("border-radius", "3px");
}).mouseleave(function() {
$(this).css("background", "00F").css("border-radius", "0px");
});
これを試して:
$('#some-content').hover(function(){
$(this).css({ marginTop: '60px', display: 'inline-block' });
}, function(){
$(this).css({ //other stuff });
});
またはクラスを使用して
$('#some-content').hover(function(){
$(this).toggleClass('newClass');
});
詳細はこちら 。hover() および 。toggleClass()
それらを hover イベントに入れる必要があります。
var elem = $('#elem');
elem.hover(function () {
// ... :hover, set styles
}, function () {
// ... this function is called when the mouse leaves the item, set back the
// normal styles
});
ただし、CSSをクラスに入れ、JSでそれらのクラスを使用することを完全に推奨します。可能な限り言語を分割する必要があります。
$("#someObj").hover(function(){
$(this).css(...);
}:);