7ion

Господа, решение должно работать именно с версткой из примера. Без Было бы так просто - я бы не спрашивал :) Нашел решение. https://jsfiddle.net/kzosd0wp/5/

Есть <span class="hider">. По :hover он должен показывать свое содержимое. Он может быть вложен в себя на любой глубине. Демо: https://jsfiddle.net/kzosd0wp/3 Проблема: когда срабатывает :hover на корневом .hider, все .hider на всю глубину показывают теги <a>, но не должны. Требуемое поведение: по :hover .hider показывает только свое содержимое и родительских hider, но не содержимое вложенных в него .hider. Сейчас при наведении курсора на внешний hider показывается лишняя ссылка, но не должна. Ее должно быть видно только при наведении на дочерний .hider. Селектор .hider:hover > a не выход, т.к. внутри .hider ссылка может быть обернута во что угодно (или нет). Куда добавить специфичности, чтобы link2 реагировал на :hover только своего .hider?

Вы гений :) Благодаря тому, что вы заюзали transition, клик прилетает в координаты раньше, чем там появится ссылка. Все работает, спасибо!

Вы же поняли, что я не просто так спрашиваю? :) Демо https://jsfiddle.net/0tqgn35L/2/ Зайдите с телефона и попробуйте нажать на текст "Второе предложение". Что произойдет: На span кинется hover Сработает показ ссылки по :hover Клик уйдет в ссылку. ????? Не работает!

Если я буду их убирать-возвращать, ширина <span> будет прыгать. Кроме того, возвращать по какому событию?

Добрый день. Такая задача. В оформлении текста используются невидимые блоки - span.show-on-hover, где color = background-color и где color становится контрастным по .show-on-hover:hover. Вместе с текстом прячутся ссылки и показываются по .show-on-hover:hover a. Всплыла проблема с мобильными пользователями. Чтобы увидеть текст блока, они в него тыкают. Порой они ненароком попадают в невидимую ссылку и тотчас переходят по ней. Нужно чтобы по ссылке невозможно было перейти с первого тапа, первый тап должен только кинуть :hover на .show-on-hover, и только вторым тапом можно тапнуть по ссылке. При этом для пользователей компьютеров все должно быть по-прежнему, никаких кликов для раскрытия. Я смастерил такое: .show-on-hover a { pointer-events: none; } .show-on-hover:hover a { pointer-events: auto; } Не помогает - при тапе по невидимой ссылке .show-on-hover ловит :hover и когда ссылка ловит клик, на ней уже разрешены pointer-events. Это реально решить чистым CSS?

То, как мне нужно - чтобы button работал как span, а не наоборот В этом и суть. -webkit-appearance: button превращает span в неявный inline-block, но если применить -webkit-appearance: none к button, не произойдет ничего! Это просто шикарно. Удивительная история: button по новым стандартам разработчик обязан использовать для активации любой интерактивности, а стилизовать button нельзя. Классно, супер.

Есть span. Если спану задать padding, он вывалится за поля родителя. Если button задать padding, display: inline; border: 0, то за поля родителя кнопка все равно вылезать не хочет. Почему? Демо - https://jsfiddle.net/hmev9p1r/

Вот за 10 постов мы и пришли к тому, откуда начали В итоге решил добавлять блок .fixer на стороне сервера.

Так. Теперь оставьте текста столько, чтобы картинка распирала блок по высоте.

Я благодарен вам за помощь, но вы не понимаете поставленной задачи. Если отредактировать две ваших последних картинки, то должно быть так (красной линией отмечены границы поля): Попробуйте сверстать это в режиме IE7, используя только div и вложенные в него в любом порядке p и img и любой css-код. Любых других подпорочных и распорочных блоков в html-коде быть не должно, иначе бы я просто встраивал класс .fixer из первого сообщения на стороне сервера, а не яваскриптом.

То, что мне нужно получить в итоге - картинку, прибитую к левому верхнему углу без полей вообще, и текст, который отстоит от краев контейнера на 1em и обтекает картинку. Вот так и вот так (все хорошо в ИЕ8): Вот что я получаю в ИЕ7: В вашем примере, как видно, нижнее поле съедается, но даже если починить его с помощью clear:left, то останется точно такое же поле при небольшом тексте, которого нет в ИЕ8: Поэтому ваш пример не помогает, никак, либо я чего-то не понимаю.

Отступ снизу никуда не девается, и в случае вложенного флоата инспектор показывает даже очень забавные картинки. Для сравнения - в режиме IE8 все адекватно.

Мне нужно, чтобы текст обтекал картинку, если его много.

Обеспечиваю тут поддержку IE7 и не могу найти правильных слов для гугла. Примеры типа "добавьте плавающему элементу display: inline либо zoom: 1" не работают. Есть такой код: <div> <img src="http://placekitten.com/200/200?image=6" /> <p>Текст</p> </div> И к нему CSS div { overflow-y: hidden; } img { float: left; } p { margin: 1em; } Если запустить это в любом ИЕ <= 7, у img появится margin-bottom от подследнего вложенного элемента. В IE >= 8 такого бага нет. Смастерил на коленке фикс: .fix { zoom: expression( this.runtimeStyle.zoom="1", this.appendChild( document.createElement("div") ).className="fixer" ); } .fixer { width: 0; height: 0; } Фикс оказался совершенно хрустальным: после первой JS-ошибки экспрешены не работают, а ошибки, увы, есть. Есть способ как-то починить это без экспрешенов? Демо: http://pskovich.ru/garbage/iebug.html (в иешных средствах разработчика выбрать режим IE7).