Задание

@griboyedov · Регистрация: 28.12.2013

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

Добрый день, форумчане. Есть следующий HTML:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <title></title>
</head>
<body>
    <form>
        <div class="page1">
            <section>
                <img border="0" tabindex="1" src="pictures/картинка1.jpg">
                    <p>
                                           Много текста.
                    </p>
            </section>
            <section>
                <img border="0" tabindex="1" src="pictures/картинка2.jpg">
            </section>
            <section>
                <img border="0" tabindex="1" src="pictures/картинка3.jpg">
            </section>
        </div>
        <div class="page2">
            <section>
                <img border="0" tabindex="1" src="pictures/картинка4.jpg">
            </section>
            <section>
                <img border="0" tabindex="1" src="pictures/картинка5.jpg">
            </section>
            <section>
                <img border="0" tabindex="1" src="pictures/картинка6.jpg">
            </section>
        </div>
        <input type="radio" class="radio1" name="check">
        <input type="radio" class="radio2" name="check">
    </form>
</body>
</html>

А есть следующий CSS:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
img
{
    width: 200px;
    height: 200px;
    cursor: pointer;
}
 
section
{   
    width: 200px;
    height: 200px;
    display: inline-block;  
    overflow: hidden;
}
 
 
.page1 ~ input:checked
{
    display:all;
}
 
.page2
{
    display: none;
}
 
body
{
    text-align: center;
    vertical-align: middle;
}
 
img:focus
{ 
    width:500px;
    height: 500px;
    position: absolute;
 
 }

Есть 2 вопроса:
1) Как сделать так, чтобы при наведении на картинку отображался текст?
2) Как с помощью radio сделать (если включен .radio1 отображалось содержимое .page1 и наоборот при включенном .radio2)?

Qwerty_Wasd · 28.04.2018, 18:41

griboyedov, если вы хотели сделать табы, то вот простейший пример - песочница

HTML5
1
2
3
4
5
6
7
8
9
10
11
<div class="tabs-widget">
  <input class="tab-trigger" type="radio" id="tab-1-1" name="radio" checked="checked"/>
  <label for="tab-1-1">TAB1</label>
  <input class="tab-trigger" type="radio" id="tab-1-2" name="radio"/>
  <label for="tab-1-2">TAB2</label>
  <input class="tab-trigger" type="radio" id="tab-1-3" name="radio"/>
  <label for="tab-1-3">TAB3</label>
  <div class="scroller" id="tab_1_1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi recusandae error corrupti molestias tenetur obcaecati a? Saepe magnam animi iure harum quibusdam unde sit reprehenderit accusamus dolorum, quo quis quidem?</div>
  <div class="scroller" id="tab_1_2">Loremのイプサムのニンジンは、リベートを強化します。誤って受け入れた場合面倒バウンド盲目になりますか？心の中で、これらの偉大な悲しみの一部を非難する権利、多くの場合、男性は全く不明である何の事、彼がどこから来るかで障害を見つけますか？</div>
  <div class="scroller" id="tab_1_3">Lorem ipsum गाजर बढ़ाया छूट। अगर गलती से स्वीकार कर लिया परेशानी बाध्य अंधा हो गए हैं? मन की है, है ना इन महान दु: ख में से कुछ का आरोप लगा है, अक्सर जहां वह, से आता है क्या बातें एक आदमी पूरी तरह अनजान हैं के साथ गलती खोजने के?</div>
</div>

CSS
1
2
3
4
5
6
7
.tabs-widget{text-align:center}
.tab-trigger{position:absolute;clip:rect(0, 0, 0, 0)}
label{margin:0 20px;cursor:pointer}
label:hover{background:gray}
.scroller{height:300px;width:400px;border:1px solid black;margin:10px auto;display:none}
#tab-1-1:checked ~ #tab_1_1, #tab-1-2:checked ~ #tab_1_2,#tab-1-3:checked ~ #tab_1_3{display:block}
#tab-1-1:checked ~ label[for='tab-1-1'], #tab-1-2:checked ~ label[for='tab-1-2'],#tab-1-3:checked ~ label[for='tab-1-3']{background:#000;color:#fff}

Добавлено через 1 минуту

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

.page1 ~ input:checked

это не имеет смысла применительно к вашей задаче

Добавлено через 1 минуту
Во-первых потому, что input должен быть выше в коде. Во-вторых input и page должны иметь одного родителя.

Добавлено через 44 секунды
Ударение на последнее слово - РОДИТЕЛЯ, не предка.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .