CSSでif文を使用する方法、またはjavascriptで解決する方法は？

ページの下部にあるデモCSSでif文を使用する方法、またはjavascriptで解決する方法は？

だから私はのは#myDivそれを呼びましょう、デフォルトで不透明度0を持つdiv要素を持っています。

ユーザーが#myDivの上に置いたときに、1

#myDiv { 
    opacity: 0; 
} 

#myDiv:hover { 
    opacity: 1; 
}

への不透明度の変更は、今、私のようなので、例えば、デフォルトwidth: 0;でだのdiv内<hr/>タグを持っている：

hr { 
    width: 0; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
}

ユーザーが#myDivを移動すると、次のように幅が100％になります。

#myDiv:hover hr { 
    width: 100%; 
}

ここでは、ホバー効果を引き起こさないため、このウェブサイトにモバイルユーザーをチェックするスクリプトもあります。したがって、divが画面に表示され、不透明度が1に設定されているかどうかがチェックされます。

の効果をモバイルで発生させたい場合は、if文を使用することができます私はそれが可能だとは思わない。私が考えていることのようなものです：

if (#myDiv.opacity == 1) { 
    hr { 
    width: 100%; 
    } 
}

しかし、これはCSSで行うことができない、これはJavaScriptで可能であるか、ここに最善の解決策になるだろうか？

JavaScriptに関する多くの経験はありません。 Go to My Work and hover over project

どのように私は携帯でこれを達成することができます参照して、デスクトップ上でデモを表示するには

？

出典

2017-12-15 Dylan

'scss'の使い方は？ – Lokesh

あなたはメディアクエリ（https://www.w3schools.com/css/css3_mediaqueries_ex.asp） – Edwin

を見てみたいので、#myDivが見えているかどうかをチェックして不透明度を変更するJSスクリプトがありますこのスクリプトもアニメーションをトリガーしますか？ – Dirk

試してみても、不透明のためのあなたのjsを削除することができます;）

@media screen and (max-width:767px){ 
    #myDiv { 
    opacity: 1; 
    } 
    #myDiv hr { 
    width: 100%; 
    } 
}

編集：あなたは、ビューである場合には、チェックする必要があることを考慮すると、JSの代わりに、不透明度を設定します1に、#myDivにクラスを追加し、このようなCSSを変更：

hr { 
    width: 0; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 

#myDiv { 
    opacity: 0; 
} 

#myDiv:hover, #myDiv.mobile { 
    opacity: 1; 
} 

#myDiv:hover hr, #myDiv.mobile hr { 
    width: 100%; 
}

この方法であなただけのクラスを追加して、デスクトップと同じCSSの方法の変更を処理します。）

出典

2017-12-15 08:34:07

を参照してください。jsは、divが実際に画面に表示されているかどうかを検出するためにも使用されます。あなたがリンクとinspect要素を見ると、不透明度がスクロールするときだけ変化することがわかります。 – Dylan

あなたの必要性に合わせて編集： –

私はこのクラスを追加しようとしています：（isScrolledIntoView（tile1））？ var caption1 = document.getElementById（ 'caption1'）これはエラーを発生させます： "不定"のプロパティを読み込むことはできません。私のhtmlにも存在します – Dylan

いいえ、プレーンなCSSのif文は使用できません。あなたは、基本的な検出のためuse a mediaqueryを行うことができます

@media screen and (max-width:767px){ 
    hr { 
    width: 100%; 
    } 
}

767pixelsはiPadのより少ないものです。あなたはこれをあなたが好きな設定に変更することができます。

また、これはjavascriptで行うこともできます。もしそうなら、あなたはisMobileクラスを<body />に追加してください。今、あなたはこれを行うことができます：「ビューの場合にのみ、」、あなたは要素が表示されているかどうかを検出するためにJavaScriptを使用することができます（これはJavaScriptで行う必要があります）について、追加したコメントに基づいて

.isMobile hr { 
    width: 100%; 
}

。見つけられるスニペットがたくさんあります。同じトリックを使用して、isInViewのようなクラスを追加することができます。

どちらの場合でも、私はCSSに実際の変更をさせました.JSは単なる助けにすぎません。これはCSSがJSではなくスタイリングを行うからです。そして、このようにして、あなたは何をしなければならないかをcssに知らせます。メディアクエリを使用して

出典

2017-12-15 08:32:10 Martijn

しかし、＃myDivがビューにあるときに幅を追加するだけでよいので、どのように達成されますか？ – Dylan

私の答えを広げました。最後の段落の – Martijn

jQueryを使用できます。これでコメントが機能しない場合は、私はあなたを助けることができます。私はデスクトップatmの背後にいません

if ($('.test').css('opacity') === '1') { 
    $("hr").css("width", "100%"); 
}

出典

2017-12-15 08:38:48 Tomm

CSSでif文を使用する方法、またはjavascriptで解決する方法は？

答えて

関連する問題