2
これは Chrome の独自仕様に過ぎず、他ブラウザでの動作は期待しない方がいいのでしょうか?
はい、期待しないほうが良いと思います。
CSS 2 では img 要素で画像が表示されない場合に、設定しておいた before, after 擬似要素により生成されたコンテンツが表示される、という例が載っていました[1]。
12.2 The 'content' property[1]
The next rule inserts the text of the HTML "alt" attribute before the image. If the image is not displayed, the reader will still see the "alt" text.
IMG:...
2
cssだけで中身による選択はできないはずです.例えば,以下のような要素に対してマッチすべきかみたいなことを考えると,対応できないというのが何となくわかるのではないでしょうか.
<div class="hoge"><p>ばなな</p><img src="huga.png"/></div>
<div class="hoge"><p>banana</p><img src="ばなな.png"/></div>
そのようなセレクタでいうと,属性セレクタ(参考:https://developer.mozilla.org/ja/docs/Web/CSS/Attribute_selectors)...
2
flex-wrap プロパティの初期値は nowrap であり、この状態では flex アイテムは単一行に配置され、行内に収まらない場合には flex コンテナからはみ出すこともあります[1], [2]。恐らく、質問者さんが直面されている状況は前述のケースに合致します。
ul {
display: flex;
width: 300px;
padding: 0;
border: 5px solid #faa;
list-style: none;
}
img {
vertical-align: top;
}
<ul>
<li><img src="http://placehold.jp/3d4070/ffffff/50x50....
1
今回の場合イベントの伝播を制御しようとするとかえって複雑になりそうなので、月並みな方法ですが、 is メソッドで $nav がホバーされているかどうかを確認し、それを都度変数へ保存しておくという方法が代替として考えられます。
$(function() {
const $nav = $('.nav');
const $item = $('.nav__item');
let isNavHovered = $nav.is(':hover');
$item.hover(
function() {
const $megamenu = $(this).find('.megamenu__body').stop(true, true);
if (isNavHovered) $...
1
stepsectionがどこで入るかにもよりますが、ネストしない(必ずsection直下にある)のであれば、start属性は無視してsectionでカウンタをリセットすればいいんじゃないでしょうか。
section {
counter-reset: listCounter;
}
section > ol > li {
list-style-type: none;
}
section > ol > li::before {
content: counter(listCounter) ".";
counter-increment: listCounter;
margin-right: 0.1rem;
font-weight: bold;
}
...
1
javascriptのオープンソースに、以下のようなものがあります。
この辺を試してみましょう。ただ、少し難易度は高いかもしれません。
http://scrollmagic.io/
ちなみにこの質問の場合、タグはHTML,css,javascriptになるかと思いますよ。
上位に投票された、最小文字数のコミュニティ wiki 以外の回答のみが対象となります
関連するタグ
css × 439html × 223
javascript × 136
jquery × 70
html5 × 49
bootstrap × 21
php × 15
ruby-on-rails × 12
wordpress × 10
monaca × 9
sass × 9
ios × 7
onsen-ui × 7
safari × 6
ruby × 5
iphone × 5
google-chrome × 5
internet-explorer × 5
twitter-bootstrap × 5
android × 4
visual-studio × 4
gulp × 4
font × 4
svg × 4
python × 3