Никто так и не ответил на два главных вопроса..
1. Какой вариант лучше в плане описания/вызова/местоположения функций? Первый блок кода вызывается всего один раз.
2. Приемлем ли подход с mouseenter и mouseleave, учитывая, что не нужен класс, hover не нужен, таких элементов всего два.
lahomie93, использовать универальный путь images/pic-1.jpg - это значит, что картинка будет искаться в папке images, которая лежит на том же уровне, что и файл html. Если работаете в sublime text, то у него нсть плагин, который сам прописывает путь к элементу
Stilar, ок. Но нужно знать ширину блока 1 и блока 3. Фиксированная она у них или занимает остальное пространство родительского контейнера, минус 210px блока 2 ?
Уходит за поля, потому что у контейнера фиксированная щирина)
Слушайте, это вообще так себе затея. Есть же флекбоксы,они нормально поддерживаются. Если в каком-то унылом браузере что-то не будет отображаться - чёрт с ним. Поищите хаки, чтобы флекбоксы работали во всяком старье. Задач простая, как и её решение. Но судя по вашему влпросу, я понял, что вв не ищите простых путей)
Антон Спирин, да это понятно. Вы вообще внимательно прочитали вопрос? И комментарий, где саазано, что сейчас всё не важно. Очевидно ж, что горит, и нужен временный костыль
Stilar, Я думал у вас есть опыт в вёрстке, просто не получается сделать то, что было озвучено в вашем вопросе. Так-то надобно было убрать фиксированную высоту у второго блока. За неимением контента, надо же как-то его отобразить, а значит - добавить высоту (для примера). Или добавить
min-height: какое-то число
Вы добавили текст во второй блок, но у него высота 150px - значит он не сможет растянуться
Stilar, https://jsfiddle.net/ouodkeLn/202/ Вот, пожалуйста - фиксированные 210зч. Вы же не дали ссылку на песочницу и не выложили свой код, указав только конкретную ширину одного блока в качестве входных параметров.
Stilar, Знаю. Я лишь показал общую концепцию, отвечая на ваш вопрос. Как я понял по вашему вопросу, вы сумеете подстроить под себя ширину, высоту, цвета и прочее )
BRAGA96, Прошу прощения, я неправильно вас понял. Так как речь была об использовании CSS (вы предлагали обойтись без js), то я решил, что :parent - какой-то неизвестный мне псевдокласс (псевдоселектор) CSS
я думал вы имеет ввиду нечто вроде
.sounds-wrapper:hover:parent
и, соответственно, рассуждал в этом контексте, что лучше использовать js для изменения класса родителя
BRAGA96, Я использовал mouseenter и mouseleave, потому что у меня внутри элемента, на который нужно навести, есть ещё элементы, у которых так же есть элементы, на которые нужно наводить.
https://jsfiddle.net/sfvyw5kt/1/ - на левой кнопке mouseenter и mouseleavе, на правой - hover. Всё равно от использования hover нет какой-то экономии кода или лучшей читабельности
Виталий, Потому что я пока пишу - тестирую код, вношу изменения. У меня в самом начале анимация, затем что-то ещё. И я могу, например, отключить начальную анимацию и протестировать то, что за ней. К тому же есть сеттаймауты и удобней в них ссылаться на функции, чем там же описывать код
Да, я думал о том, чтобы повесить два события на элемент, но не смог принять решение : оставить так как есть, для более лучшей читабельности или попытаться сэкономить пару строчек. Ведь не всегда всё это может быть оправданно. И мне интересно, для гуру такой код приемлем ? Исходя из ситуации и понимая, что можно не мудрить - оставили бы так ? Или всё же есть какие-то понятия об эстетике, лаконичности в укор читаемости.
2. Вместо такой конструкции
Лучше передать контекст
Интересно, спасибо. Впервые вижу такой подход
И с ховером, увы, не прокатит, потому что у меня есть другие элементы внутри этого элемента. Так конечно же было бы легче
1. Какой вариант лучше в плане описания/вызова/местоположения функций? Первый блок кода вызывается всего один раз.
2. Приемлем ли подход с mouseenter и mouseleave, учитывая, что не нужен класс, hover не нужен, таких элементов всего два.