-1

さて、あなたが行くことができれば;

http://jsfiddle.net/aled2305/UzM7U/4/

青い円が表示されます。マウスを赤い四角の上に置くと、右側に表示されます。これですべてが思いどおりに機能しましたが、ユーザーがマウスをその上に置いたときに赤いボックスをそのままにしておきたいと思います。

赤い四角が表示されている場所にマウスを移動すると、次の理由で表示されます。

.down:hover
{
    opacity:100;
}

マウスがその上にあるときに赤い四角がとどまるようにする方法はありますが、青い円の上にカーソルを置いてアクティブにした場合のみです。

前もって感謝します

アレッド

アップデート

申し訳ありませんが、マウスを離したら赤い四角を非表示にしたいと言い忘れました。

ありがとう

4

4 に答える 4

2

これは、次のロジックに従う Fiddle Using JS です。

  1. 青い円にカーソルを合わせると赤いボックスが表示されます
  2. マウスが Reds を離れると、Red Box が非表示になります

少し JQuery を追加して CSS を変更することで、その効果を得ることができます。

JQuery:

$(".gravatar").hover(
  function () {
    $(".down").addClass('hoverDown');
  }
);

$(".down").mouseleave(
  function () {
    $(".down").removeClass('hoverDown');
  }
);

CSSは次のとおりです。

.gravatar {
    background-color:blue;
    float: left;
    margin-top: 2px;
    margin-right: 10px;
    margin-left:  2px;
    border-radius: 20px;
    width: 40px;
    height: 40px; 
}

.down
{
    float:left;
    width: 40px;
    height: 40px;
    background-color:Red;
    opacity:0;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;


    }
.hoverDown
{
    opacity:1;

}
于 2013-11-13T22:27:59.200 に答える
0

マウスインとマウスアウトのアクションには、mousenter mouseleave jquery 関数を使用できます

$(".gravatar").mouseenter(
  function () {
    $(".down").addClass('hoverDown');
  }
);
$(".gravatar").mouseleave(
  function () {
    $(".down").removeClass('hoverDown');
  }
);

ワーキングフィドル：

http://jsfiddle.net/UzM7U/9/

于 2013-11-13T22:49:01.947 に答える
0

JavaScript または CSS3 アニメーションを使用できます。CSS3 アニメーションの例はこちらです ... Make CSS Hover state after "unhovering"

CSS 2.1 では、やりたいことができません。

于 2013-11-13T22:50:03.910 に答える