JQuery:指定してある特定のclassをhoverで外す

harada 1,091views 更新:2014年5月16日

ページ表示時からオンマウスの動きを明示しておきたいときや、最初だけ目立たせたいときなどに使えるかと思います。
表示サンプルはこちら

Javascript

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $(".item").mouseover(function(){
        $(".item").removeClass('active');
    });
});
</script>

サンプルのHTML

<div class="item">
<a href="#">A</a>
</div>
<div class="item active">
<a href="#">B</a>
</div>
<div class="item">
<a href="#">C</a>
</div>
<div class="item">
<a href="#">D</a>
</div>
<div class="item">
<a href="#">E</a>
</div>

サンプルのCSS

.item {
    display:inline-block;
    font: 30px sans-serif;
}
.item a {
    display:block;
    width:30px;
    height:30px;
    line-height:30px;
    background:#000;
    color:#EEE;
    text-align:center;
    text-decoration:none;
}
.active a,
.item a:hover {
    background:#ff9900;
    color:#fff;
}

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません