モバイルデバイスのCSSホバー

正面から言えば、私は初心者です。誰かがページをスクロールしていたときに問題を起こしていたため、モバイルデバイス用の画像のホバー機能をオフにする必要がありました。私はプログラマーにupwork.comでそれをするように頼んだ。彼は正常にホームページの画像のためにCSSを通してそれをやった。モバイルデバイスのCSSホバー

しかし、ここでは、新しい画像にさまざまなセクションを追加して、これらの新しい画像を有効にしました。残念なことに、私が使ったプログラマーは、彼のやり方を分かちたいとは思っていませんでした。

私は自分でこれを行う方法を理解することをお勧めしました。

ページはfoxandowlkids.com/index_postlaunch.html

であるあなたは、「機能」の画像は、ラップトップ上でカーソルを移動していることがわかりますが、モバイルにオフになります。私はどのように私は "多才な"画像でこれを達成することができますか？正直言って、どのCSSファイルを調べておくべきかも分かりません。

ご協力いただけると助かります。

出典

2017-03-17 denverowl

ブラウザのデベロッパーツールを使用して、ウェブページが何をしているのか、どのCSSファイル/クラスが有効であるのか調べてみてください。 – Brino

行3478と効果を引き起こしている/www/css/style.cssで3460：あなたの影響を書き換えのみ768px以上の画面サイズとデバイスをターゲットにし、このようなものを、見えるかもしれません。それを無効にするには、@mediaクエリでこれらの宣言（セレクタを含む）をラップするか、別のファイルからそれらの宣言を上書きすることができます。

@media (min-width:768px) { 
    .works-grid.hover-white .work-item:hover .work-img:after{ 
    background: rgba(250,250,250, .9); 
    } 
} 
/* ... */ 
} 
@media (min-width:768px) { 
    .work-item:hover .work-img:after{ 
    background: rgba(20,20,20, .85); 
    } 
}

のstyle.cssへの改造が失われるのでしかし、私は、style.css後にロードされ、異なるスタイルシートであなたの改造を配置する2番目のオプションを、お勧めします：あなたが使用できる場所でそれらを変更するに

あなたが子供のテーマを使っているのでない限り、テーマの更新に関しては、そうではないようです。だからここでは、あなた自身のスタイルシートに配置するより安全なルート、次のとおりです。

@media (max-width:767px) { 
    .works-grid.hover-white .work-item:hover .work-img:after, 
    .work-item:hover .work-img:after { 
     background-color: transparent; 
    } 
}

あなたはあなた場合は、影響を受けたデバイスまたは540pxための錠剤を含めたい場合は992pxため768pxブレークポイントを交換したいチャンスがあります。（ほとんどの）スマートフォンへの変更を制限したいだけです。

しかし、物事を壊す可能性が無意識のうちに巨大であるとして、生産で修飾されていないコードを許可するために、常に悪い考えであることをお勧めされてください。一般的なルールとして、この小さなものを数ドル支払うことは、異なる画面サイズや異なるデバイスでそれを破る危険性を常に上回ります。コードが変更されたもの、適用される方法、試して。

あなたが望むすべてのテスト環境で再生し、学習するために使用します。しかし、お客様のウェブサイトやお客様のブランドイメージがお客様の目の前で気になる場合は、生産現場では理解できないことを変更しないでください。CSS、javascriptまたはphpです。 の場合は、となりますが、の場合は、となります。私の言葉をそれに服用しないでください。 10人以上の開発者にあなたの選択の任意の仕事の関係なく、答えを参照してください。

出典

2017-03-17 21:51:11

ありがとう、これは非常にうまくトリックでした！ – denverowl

この特定のサイトでは、<html>要素でそのクラスを調べるようだと思われます。通常の画面では、.no-mobileクラスがあります。モバイルデバイスの場合、これは.mobileに変更されます。 CSSによる

移動し、そこだところ、このようなものを探してください：ホバー状態：すべての前でhtml.noモバイルセレクタがありますように

.work-item:hover .work-img > img { 
    -webkit-transform: scale(1.05); 
    -moz-transform: scale(1.05); 
    -o-transform: scale(1.05); 
    -ms-transform: scale(1.05); 
    transform: scale(1.05); 
}

はそれを修正します。これにより、「モバイル」とはみなされない画面のみをターゲットにすることができます。変更されたコードは次のようになります。

html.no-mobile .work-item:hover .work-img > img { 
    -webkit-transform: scale(1.05); 
    -moz-transform: scale(1.05); 
    -o-transform: scale(1.05); 
    -ms-transform: scale(1.05); 
    transform: scale(1.05); 
}

明らかにユーザーが使用しているデバイスの種類をチェックするとHTMLクラスを更新しているどこかのスクリプトがありますので、これが唯一のあなたのケースで動作することを知ってください、あなたはそれを利用することができます。

純粋なCSSを使用すると、メディアクエリを記述して特定のデバイス幅をターゲットにする必要があります。

@media (min-width: 768px) { 
    .work-item:hover .work-img > img { 
     -webkit-transform: scale(1.05); 
     -moz-transform: scale(1.05); 
     -o-transform: scale(1.05); 
     -ms-transform: scale(1.05); 
     transform: scale(1.05); 
    } 
}

出典

2017-03-17 21:47:01 DavyH

この助けをありがとう！ – denverowl

モバイルデバイスのCSSホバー

答えて

関連する問題