Разъясните, пожалуйста, код

@Euroman · Регистрация: 11.12.2012

Студворк — интернет-сервис помощи студентам

Вот код HTML

HTML5
1
2
3
4
5
6
7
8
9
10
<ul id="footer-logos">
<li><a href="#"><img src="img/logo-sb.png" alt="SimpleBits
logo" /></a>
</li>
<li><a href="#"><img src="img/icon-feed.png" alt="RSS feed" /
></a>
</li>
<li><a href="#"><img src="img/icon-bitman.png" alt="BitMan" /
></a>
</li>

CSS

CSS
1
2
3
4
#footer-logos a: hover img,
#footer-logos a: focus img {
opacity: 0.6;
}

Конкретно меня интересует здесь выражение

CSS
1
a: hover img

. Это означает, что 2 класса сразу наследуются (я так понял, что наследуемые классы указываются без запятых)?

Добавлено через 5 минут
Просто, если вот так, допустим прописать

CSS
1
#footer-logos img:hover, #footer-logos img:focus{opacity:0.6;}

или поменять местами hover и focus

CSS
1
#footer-logos img:focus, #footer-logos img:hover{opacity:0.6;}

То в обоих случаях только hover срабатывает. Мне не понятно, в чем ошибка.

@Alexandrgx · 30.03.2013, 11:33

Сообщение от Euroman

Это означает, что 2 класса сразу наследуются

Классов здесь вообще нет. Есть псевдоклассы.

Сообщение от Euroman

То в обоих случаях только hover срабатывает. Мне не понятно, в чем ошибка.

У меня всё срабатывает

:hover
Псевдокласс :hover активизируется, когда курсор мыши находится в пределах элемента, но щелчка по нему не происходит.

:focus
Применяется к элементу при получении им фокуса. Например, для текстового поля формы получение фокуса означает, что курсор установлен в поле, и с помощью клавиатуры можно вводить в него текст.

Нажимайте tab и увидите, что псевдокласс срабытывает.

Сообщение от Euroman

или поменять местами hover и focus

Определенного порядка нет. Всё будет также.

Сообщение от Alexandrgx

Нажимайте tab и увидите, что псевдокласс срабытывает.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
    <meta charset="windows-1251">
    <title>Test</title>
    <link rel="stylesheet" href="css/style.css"/>
</head>
<body>
    <ul id="footer-logos">
        <li><a href="#"><img src="img/logo-sb.png" alt="SimpleBits logo" /></a></li>
        <li><a href="#"><img src="img/icon-feed.png" alt="RSS feed" /></a></li>
        <li><a href="#"><img src="img/icon-bitman.png" alt="BitMan" /></a></li>
    </ul>
</body>
</html>

Правда у вас CSS-код корявый

Вот так должно:

CSS
1
2
3
4
#footer-logos a:hover img,
#footer-logos a:focus img {
     opacity: 0.6;
}

@Euroman · 30.03.2013, 13:13 **[ТС]**

Не знай, у меня при нажатии на tab не срабатывает. Я знаю, что такое hover и focus. Вы сказали то, что я знаю, а по делу ничего не сказали. А то что вы говорили про корявый код, так вначале у меня стоит такой же некорявый код.

KOPOJI · 30.03.2013, 16:24

может, я чего-то не понимаю, но каким образом картинка может получить фокус?

@Euroman · 30.03.2013, 17:10 **[ТС]**

Сообщение от KOPOJI

может, я чего-то не понимаю, но каким образом картинка может получить фокус?

Вы имеете ввиду, что вот этот код неверный?

CSS
1
#footer-logos img:focus

Честно говоря не знаю, поэтому и спрашиваю

Просто думал, что картинка будет выделяться при нажатии Tab.

KOPOJI · 30.03.2013, 17:15

я имею в виду, что :focus предназначен для тех элементов, которые могу получить фокус - поля ввода..

@Euroman · 30.03.2013, 17:19 **[ТС]**

Сообщение от KOPOJI

я имею в виду, что :focus предназначен для тех элементов, которые могу получить фокус - поля ввода..

Вы, наверное, путаете с autofocus. Там да, для автоматического выделения поля.

KOPOJI · 30.03.2013, 18:09

Это Вы, наверное, путаете. http://www.w3schools.com/cssref/sel_focus.asp

Definition and Usage

The :focus selector is used to select the element that has focus.

Tip: The :focus selector is allowed on elements that accept keyboard events or other user inputs.

@Euroman · 31.03.2013, 00:14 **[ТС]**

Сообщение от KOPOJI

Это Вы, наверное, путаете. http://www.w3schools.com/cssref/sel_focus.asp

Путаете, http://htmlbook.ru/samhtml5/formy/avtofokus
Фокус не обязательно только для ввода. В приведенном выше примере он тоже работает. Выделяет ссылку при нажатии tab и работает с ней. Я же из книги взял пример, который работает. Если примените вышестоящий код в начале темы, то у вас тоже заработает. Почитайте литературу.

KOPOJI · 31.03.2013, 00:27

Не по теме:

Сообщение от Euroman

Путаете

нет. и уж тем более сначала посмотрел на офф сайте, а уж потом на какие-то левые ссылки.

Сообщение от Euroman

Фокус не обязательно только для ввода

Видимо, у Вас проблемы с английским.

Сообщение от Euroman

Почитайте литературу.

Спасибо, уже читал, давно, больше не надо.

@Euroman · 31.03.2013, 00:44 **[ТС]**

Сообщение от KOPOJI

Не по теме:

нет. и уж тем более сначала посмотрел на офф сайте, а уж потом на какие-то левые ссылки.

Не по теме:

Вообще это самый популярный русскоязычный сайт про html и css, а не какая-то левая ссылка. Рекомендую вам туда почаще заходить.

CSS
1
2
3
4
#footer-logos a: hover img,
#footer-logos a: focus img {
opacity: 0.6;
}

Вы еще скажите, что этот код не работает.

Сообщение от KOPOJI

Видимо, у Вас проблемы с английским.

Не по теме:

У меня проблемы есть, только Бог владеет языком в совершенстве.

KOPOJI · 31.03.2013, 00:51

Не по теме:

Сообщение от Euroman

Вообще это самый популярный русскоязычный сайт про html и css, а не какая-то левая ссылка. Рекомендую вам туда почаще заходить.

Спасибо, просветили. Благодарю за рекомендацию.

Сообщение от Euroman

У меня проблемы есть, только Бог владеет языком в совершенстве.

Ну тогда хотя бы пользуйтесь переводчиком http://translate.google.com/#e... r%20inputs
Моя фраза была о том, что предназначен :focus в первую очередь для полей ввода, поэтому не надо удивляться "странной работе" или "неверной работе" или "не работе" его на картинках. За сим, видя Вашу любовь к русскоязычным сайтам, костылям и нелюбовь к англоязычным сайтам и другим мнениям, позвольте откланяться :senor:

@Euroman · 31.03.2013, 00:57 **[ТС]**

Сообщение от KOPOJI

Не по теме:

Ну тогда хотя бы пользуйтесь переводчиком http://translate.google.com/#e... r%20inputs

Не по теме:

Спасибо, просветили. Благодарю за рекомендацию.:D

Сообщение от KOPOJI

Моя фраза была о том, что предназначен :focus в первую очередь для полей ввода, поэтому не надо удивляться "странной работе" или "неверной работе" или "не работе" его на картинках. За сим, видя Вашу любовь к русскоязычным сайтам, костылям и нелюбовь к англоязычным сайтам и другим мнениям, позвольте откланяться :senor:

Не по теме:

Что значит в первую очередь? Тут в программировании два варианта - либо подходит, либо нет. Просто не понятно, почему у автора работает фокус, а я переправил и у меня нет. Компьютер же не скажет- вот так напишешь я сделаю, а вот так, хоть и правильно, но не красиво, поэтому я не сделаю. Значит у меня ошибка в синтаксисе, и мне хотелось бы выяснить, что не так. Может надо было запятую поставить, а может решетку, ну и т.д.

Vovan-VE · 31.03.2013, 06:20

Сообщение от Euroman

Просто не понятно, почему у автора работает фокус, а я переправил и у меня нет

Перечитайте всё сначала. Там :focus применяется к ссылкам, потому что они могут принимать фокус, а Вы применяете его к img, которые изначально не могут принимать фокус. Т.о., img:focus никогда не случится, и правило никогда не применится.

@Euroman · 31.03.2013, 12:17 **[ТС]**

Сообщение от Vovan-VE

Перечитайте всё сначала. Там :focus применяется к ссылкам, потому что они могут принимать фокус, а Вы применяете его к img, которые изначально не могут принимать фокус. Т.о., img:focus никогда не случится, и правило никогда не применится.

Понятно. А можно еще один вопрос по теме задать, вот почему так можно

CSS
1
a:hover img

. А если поменять местами, то уже не сработает

CSS
1
a:img hover

KOPOJI · 31.03.2013, 12:21

Эмм.. а это как раз даже на вашем любимом сайте можно посмотреть, что псевдокласса :img не существует

Добавлено через 1 минуту
http://htmlbook.ru/css/cat/pseudoclass

Добавлено через 1 минуту
быть может, вы хотели такое?

CSS
1
a img:hover { .... }

@Euroman · 31.03.2013, 15:38 **[ТС]**

Сообщение от KOPOJI

Эмм.. а это как раз даже на вашем любимом сайте можно посмотреть, что псевдокласса :img не существует

А я вот прям не догадался, что img здесь применяется к картинкам

Почему вот так можно писать

CSS
1
hover img

? Зачем указан img после псевдокласса и до скобок?

Не по теме:

Вот vovan про фокус по делу разъяснил, ему спасибо.

После двоеточия вроде как только псевдокласс и наследуемый член можно указывать. А img что здесь делает? Значит, что-то я не усвоил.

KOPOJI · 31.03.2013, 15:45

Сообщение от Euroman

А я вот прям не догадался, что img здесь применяется к картинкам

вообще не понял, про что вы. :img не будет применяться ни к чему, т.к. не существует

Сообщение от Euroman

Зачем указан img после псевдокласса и до скобок

потому что эти стили должны сработать при наведении на ссылку для тега <img>, находящегося внутри ссылки.

Сообщение от Euroman

Вот vovan по делу разъяснил, ему спасибо.

Вроде я тоже самое говорил, что картинка не может получить фокус, не? Если Вас не устраивают мои ответы - Вы только скажите, не буду мешать.

Vovan-VE · 31.03.2013, 15:45

Euroman,
http://htmlbook.ru/samcss/bazovyy-sintaksis-css
http://htmlbook.ru/samcss/selektory-tegov
http://htmlbook.ru/samcss/psevdoklassy

@Euroman · 31.03.2013, 16:46 **[ТС]**

Сообщение от KOPOJI

потому что эти стили должны сработать при наведении на ссылку для тега <img>, находящегося внутри ссылки.

Наконец-то дошло. Я просто рассматривал hover img как единое целое. Теперь понял, что hover относится только к тегу <a>, ну а img прописан как внутренняя составляющая ссылки и отношения к hover не имеет. Ступил.

Новые блоги и статьи Все статьи Все блоги /
Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .
SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .

@Euroman 28 / 24 / 2 Регистрация: 11.12.2012 Сообщений: 448
	30.03.2013, 13:13 [ТС]
	Не знай, у меня при нажатии на tab не срабатывает. Я знаю, что такое hover и focus. Вы сказали то, что я знаю, а по делу ничего не сказали. А то что вы говорили про корявый код, так вначале у меня стоит такой же некорявый код. 0

KOPOJI Почетный модератор 16844 / 6724 / 880 Регистрация: 12.06.2012 Сообщений: 19,967
	30.03.2013, 16:24
	может, я чего-то не понимаю, но каким образом картинка может получить фокус? 0

KOPOJI Почетный модератор 16844 / 6724 / 880 Регистрация: 12.06.2012 Сообщений: 19,967
	30.03.2013, 17:15
	я имею в виду, что :focus предназначен для тех элементов, которые могу получить фокус - поля ввода.. 0

Vovan-VE 13210 / 6599 / 1041 Регистрация: 10.01.2008 Сообщений: 15,069
	31.03.2013, 15:45
	Euroman, http://htmlbook.ru/samcss/bazovyy-sintaksis-css http://htmlbook.ru/samcss/selektory-tegov http://htmlbook.ru/samcss/psevdoklassy 1