14

div onmouseover の背景色を削除しようとしています。

$("#LoginTab").mouseover(function(){
    //Gives me white color
    $("#LoginTab").animate({backgroundColor: ''},1000); 
});
$("#LoginTab").mouseout(function(){
    $("#LoginTab").animate({'backgroundColor':'#babfde'},1000);
});

ここにCSSがあります

#LoginTab
{
    background-color:#babfde;
    padding-top:5px;
    padding-bottom:5px;
    opacity:1;
    border:#babfde 2px solid;
}

したがって、私が望む効果は、背景色が削除され、その div onmouseover 内の境界線と要素のみが表示されることです。

4

7 に答える 7

2

jQuery で次の簡単な方法を試してください。

 $(document).ready(function() { 
      $("#LoginTab").mouseouver(function() { 
           var p = $("#LoginTab").css("background-color", "none"); 
           p.hide(1500).show(1500); 
           p.queue(function() { 
                p.css("background-color", "#color"); 
           }); 
      }); 
 });
于 2013-07-04T05:01:28.827 に答える
2

jQueryを使って！

hoverjQuery関数が使える

一致した要素に 1 つまたは 2 つのハンドラーをバインドし、マウス ポインターが要素に出入りするときに実行されるようにします。【資料】

$('#LoginTab').hover(
    function(){
        $(this).animate({'backgroundColor': 'transparent' }, 100);
    },
    function(){
        $(this).animate({'backgroundColor': '#babfde'}, 100);
    }
);

JSFIDDLE

CSS の使用

CSSトランジションで簡単にできます：

#LoginTab {
    background-color: #AD310B; /* <--- your color here */
     -webkit-transition: background-color 1000ms linear;
     -moz-transition: background-color 1000ms linear;
     -o-transition: background-color 1000ms linear;
     -ms-transition: background-color 1000ms linear;
     transition: background-color 1000ms linear;
    height: 100px;
}
#LoginTab:hover {
     background-color: transparent;
     -webkit-transition: background-color 1000ms linear;
     -moz-transition: background-color 1000ms linear;
     -o-transition: background-color 1000ms linear;
     -ms-transition: background-color 1000ms linear;
     transition: background-color 1000ms linear;
}

JSFIDDLE

色の不透明度の設定

どちらの場合でも、次を使用できますrgba()。

 rgba(0, 0, 0, 0.5);
      ^  ^  ^   ^------ The opacity
 Red -┘  |  └----- Blue
         └ Green
于 2013-07-04T04:52:58.803 に答える