javascript - jquery の mouseover および mouseout イベントを作成しようとしています

Question

私はこれを半成功させましたが、一貫性がなく奇妙な動作をしているので、修正するのにちょっと困惑しています...マウスオーバーとマウスアウトのイベントで約半分の時間で動作します...理由がわからず、最も素晴らしいでしょう-誰かが少なくとも解決への正しい方向に私を向けることができれば完全です。

HTML:

<div class="container">
    <div id="content">
        <header id="effect-me">
            <h1>sheikhart.com</h1>
        </header>
        <div class="row">
            <div class="shan-half">
                <div class="circle"><p>Shan</p></div>
            </div>
            <div class="lindsay-half">
                <div class="circle"><p>Lindsay</p></div>
            </div>
        </div>
    </div>
</div>

CSS:

/* #444 looks better than black: twitter.com/H_FJ/statuses/11800719859 */
body, select, input, textarea { 
    color:#444;
}

/* www.aestheticallyloyal.com/public/optimize-legibility/ */
h1,h2,h3,h4,h5,h6 {
    font-weight: bold;
    text-rendering: optimizeLegibility;
}

/* maxvoltar.com/archive/-webkit-font-smoothing */
html {
    -webkit-font-smoothing: antialiased;
    background: url(images/index-bg.png) repeat-y center top;
    background-color: #111111;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: table
}

sub {
    vertical-align: sub;
    font-size: smaller;
}

sup { vertical-align: super;
    font-size: smaller;
}

/* align checkboxes, radios, text inputs with their label
   by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css  */
input[type="radio"] {
    vertical-align: text-bottom;
}

input[type="checkbox"] {
    vertical-align: bottom;
    *vertical-align: baseline;
}

.ie6 input { 
    vertical-align: text-bottom;
}

/* hand cursor on clickable input elements */
label, 
input[type=button], 
input[type=submit], 
button {
    cursor: pointer;
}

/* These selection declarations have to be separate.
   No text-shadow: twitter.com/miketaylr/status/12228805301
   Also: hot pink. */
::-moz-selection {
    background: #fb8a00;
    color:#fff;
    text-shadow: none;
}

::selection {
    background:#fb8a00;
    color:#fff;
    text-shadow: none;
}

/*  j.mp/webkit-tap-highlight-color */
a:link { 
    -webkit-tap-highlight-color: #FF5E99;
}

/* always force a scrollbar in non-IE */
html {
    overflow-y: scroll;
}

/* make buttons play nice in IE:
   www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */
button {
    width: auto;
    overflow: visible;
}

/* bicubic resizing for non-native sized IMG:
   code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
.ie7 img {
    -ms-interpolation-mode: bicubic;
}


/*******************************
 * Non-semantic helper classes *
 *******************************/

/* for image replacement */
.ir {
    display:block;
    text-indent:-999em;
    overflow:hidden;
    background-repeat: no-repeat;
}

/* Hide for both screenreaders and browsers
   css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden {
    display:none;
    visibility:hidden;
}

/* Hide only visually, but have it available for screenreaders
   www.webaim.org/techniques/css/invisiblecontent/
   Solution from: j.mp/visuallyhidden - Thanks Jonathan Neal! */
.visuallyhidden {
    position:absolute !important;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
}

/* Hide visually and from screenreaders, but maintain layout */
.invisible {
    visibility: hidden;
}

/* >> The Magnificent CLEARFIX << */
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix { 
    display: inline-block; 
}

* html .clearfix {
    height: 1%;
} /* Hides from IE-mac \*/

.clearfix {
    display: block;
}

/* Fontface */

@font-face {
    font-family: 'abeatbykairegular';
    src: url('fonts/abeatbykairegular-webfont.eot');
    src: url('fonts/abeatbykairegular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/abeatbykairegular-webfont.woff') format('woff'),
         url('fonts/abeatbykairegular-webfont.ttf') format('truetype'),
         url('fonts/abeatbykairegular-webfont.svg#abeatbykairegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*  Primary Styles
 *  Author: Resonance Design (Richard Bakos)
 *  Web: http://www.resonance-design.net
 */

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
}

hr {
    max-width: 1200px;
    margin: 1em auto;
    border-bottom: 0;
    border-top: 1px solid rgba(191, 191, 191, 0.5);
}

header {
    width: 300px;
    background: #111;
    border: 1px solid #FFF;
    border-radius: 10px;
    margin: auto;
    text-align: center;
}

header h1 {
    width: auto;
}

.effected-1 {
    border-color: #FF7700;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    transition:width all 1s;
}

.effected-2 {
    border-color: #FFFFFF;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    transition:width all 1s;
}

.container {
    width: 100%;
    max-width: 1200px !important;
    display: table-cell;
    vertical-align: middle;
    margin: auto;
}

#content {
    width: 100%;
    max-width: 1200px !important;
    margin: auto;
}

.row {
    width: 100%;
}

.shan-half {
    width: 50%;
    float: left;
    vertical-align: middle;
}

.lindsay-half {
    width: 50%;
    float: right;
    vertical-align: middle;
}

.circle {
    border-radius: 50%;
    background: #fff;
    width: 200px;
    height: 200px;
    margin: auto;
    font-size: 20px;
    text-align: center;
    color: #111;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    transition:width all 1s;
}

.circle:hover {
    background: #FF7700;
    cursor: pointer;
    color: #FFF;
    -moz-transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    transform:rotate(360deg);
}

.circle p {
    padding-top: 90px;
}

JS:

$('.circle').mouseover(function() {
    $('#effect-me').toggleClass('effected-1');
});
$('.circle').mouseout(function() {
    $('#effect-me').toggleClass('effected-2');
});

Fiddle を参照してください: http://jsfiddle.net/resonancedesign/Fgemx/

フィドルを見るとわかるように、別の要素のマウスオーバーおよびマウスアウトイベントに基づいて、要素にクラスを追加および削除しようとしています...

これを行うためのよりエレガントな方法や、例からの自分の努力で見逃した簡単なものがある場合、私は耳を傾けています...

score 1 · Accepted Answer

切り替えることで、両方のクラスを追加する場合があります。

これを試して：

$('.circle').mouseover(function() {
    $('#effect-me').attr('class', 'effected-1');
});
$('.circle').mouseout(function() {
    $('#effect-me').attr('class', 'effected-2');
});

score 1 · Accepted Answer

コードの説明。

まず、トランジションを追加する要素が必要です (あなたの場合は #effect-me になります)。これは、要素のスタイルが変更されたときに何をすべきかをブラウザに伝えているだけです。それ自体では、遷移は行われません。

#effect-me {
    border: 1px solid #fff;
    -moz-transition: border 1s ease-out;
    -webkit-transition: border 1s ease-out;
    -o-transition: border 1s ease-out;
    transition: border 1s ease-out;
}

次に、要素に新しいスタイルを追加して、元のスタイルから新しいスタイルに移行できるようにします。

#effect-me.on { border: 1px solid #f70 }

要素を配置したので、ホバー時に新しいスタイルを追加するために必要な JavaScript を追加するだけです。

$('.circle').hover(
    function(){
        $('#effect-me').addClass('on');
    },
    function(){
        $('#effect-me').removeClass('on');
    }
);

すべて整っているhttp://jsfiddle.net/CqDNf/

javascript - jquery の mouseover および mouseout イベントを作成しようとしています

2 に答える 2

Related

Reference