Псевдокласс hover?

Question

Павел migelonio @migelonio-codeman

JavaScript ➡️ C# ➡️ Python

CSS

Псевдокласс hover?

У меня на сайте есть картинка с надписью, в теге div (то есть они представляют собой один блок). Мне нужно, что бы при наведении курсором именно на картинку, с помощью hover изменялся шрифт надписи (#title_party_) на bold и border картинки (код для картинки я прописал). Что нужно исправить в моем коде, чтобы он заработал?

#halloween_partyIcon {
    height: 400px;
    margin-top: 60px;
    margin-left: 60px;
    border-radius: 5px;
    border: 4px solid #f1f1f1;
}

#halloween_partyIcon:hover {
    border-style: outset;
    border: 4px solid black;
    cursor: pointer;
}

#title_party {
    position: absolute;
    margin-left: 175px;
    display: block;
    
}

#title_party:hover {
    
    margin-left:175px; 
    font-weight: bolder;
    display: block;
}

Вопрос задан более двух лет назад
85 просмотров

9 комментариев

Подписаться 1 Простой 9 комментариев

Ankhena @Ankhena Куратор тега CSS

Не зная разметку на ваш вопрос невозможно ответить.
Вы можете либо добавить её в вопрос либо самостоятельно почитать про селекторы отсюда htmlbook.ru/css/selector/descendant и далее (меню справа).

И вы зря занимаетесь стилизацией по id. Переходите лучше на классы, пока не поздно.

Написано более двух лет назад
Павел migelonio @migelonio-codeman Автор вопроса

Ankhena, А когда будет поздно?)

Написано более двух лет назад
Павел migelonio @migelonio-codeman Автор вопроса

Ankhena, я могу добавить HTML файл

Написано более двух лет назад
Ankhena @Ankhena Куратор тега CSS

Павел migelonio,
А когда будет поздно?)
когда выяснится, что вы написали уже много кода и теперь нужно переделывать всё.

я могу добавить HTML файл

Как хотите, это ваш вопрос.

Написано более двух лет назад

Павел migelonio @migelonio-codeman Автор вопроса

Ankhena,

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>PhotoLi | registration</title>

    <!-- connecting web-page icon -->

    <link rel="icon" href="tab%20icon.png">

    <!-- connecting css -->

    <link rel="stylesheet" type="text/css" href="styles.css">


    <script async src='/cdn-cgi/bm/cv/669835187/api.js'></script>
</head>

<body>
    <header><big>PhotoLi</big></header>

    <!-- scrollDownBtn -->

    <big>


        <h3 id="main2">PhotoLi - we TAKE photos</h3>
        <a id="linkToStart" href=#footer>⁖ How we started </a>
        <a id="linkToServices" href=#footer2>⁖ Our services</a>


        <big>
            <main>
                <div class="mainInfo">
                    <big>
                        <h2 id="hello">Hello!</h2>
                    </big>


                    <p style="word-spacing: 1px">Please, leave your email and a phone number, to book a photosession</p>


                    <form id="form1">

                        <!--Input commands -->
                        <br>

                        <label>Email</label>
                        <input id="email" type="email" placeholder="email" required size="28"> <br> <br>

                        <label>Phone Number</label>
                        <input id="phone" type="tel" placeholder="phone number"> <br> <br>

                        <small><label style="font-weight: bolder; "><a id="linkToRules" href="">I agree with rules and terms</a></label></small>
                        <input id="checkboxAgree" type="checkbox" required> <br> <br>

                        <input id="submit" type="submit" value="Book photosession"> <br> <br>

                    </form>

                </div>
            </main>
            <hr id="beforeFooter">
            <footer> <small><small>since 2022 we were providing best quality photos to people</small></small></footer>

        </big>
    </big>

    <p>Our story began in January of 2022, when we decided to try photography.........</p>

    <p>Mathey - one of our main photographers and the ex-founder of <big><b>"PhotoLi"</b></big> was just a regular person who wanted to bring some colorful pictures to the world. His possesion has become even more powerful since that time and he is ready to create, take photos and share 'em with you.</p>

    <img id="matheyPhoto" styles="float:left" src="man_smokes.jpg" alt="Mathey" title="Mathey">
    <div>
        <p id="matheyInfo">"When I was young I always wanted to try photography, but there was no chance to do it.<br> But when I met my team, everything had changed.<br> We love working together, we love working with our clients" — <big style="text-decoration: underline;">Mathey Woodman</big></p>
    </div>

    <div>
        <p id="ashleyInfo">"To make our clients feel comfortable and comfident in the success of our photo session,<br> we use only new and modern cameras and other devices.<br> That's playing a big role" - <big style="text-decoration: underline;"> Ashley Blackwood </big> </p>
    </div>

    <img id="ashleyPhoto" src="Ashley.jpg" alt="Ashley" title="Ashley">

    <footer id="footer2">
        <div id="servicesFooter">Our services</div>
    </footer>
    <div>
        <p style="position: absolute; margin-left:175px;"><b>Party photosessions</b></p>

        <img src="halloween%20party.jpg" id="halloween_partyIcon" alt="book photosession">
    </div>

    <p style="position: absolute; margin-left:710px; margin-top:-450px;">

        <b>Wedding photosessions</b>

    </p>

    <img src="wedding.jpg" id="wedding_icon" alt="book photosession">

    <p style="margin-left:1230px; margin-top:-450px;"><b>Personal photosession</b></p>

    <img src="portret%20photo.jpg" id="portrait_photo" alt="book photosession">


</body>



</html>

Написано более двух лет назад

Ankhena @Ankhena Куратор тега CSS

Павел migelonio, это что за...

В этом коде вообще нет title_party - это раз.
Валидатор плачет по этому коду горючими слезами - это два.
Не нужно выкладывать всю простыню, которая у вас есть - это три. Как прикажете угадать о которой из картинок речь?

Нужно взять кусочки кода касающиеся конкретной проблемы и сделать песочницу на jsfiddle.net

Написано более двух лет назад
Павел migelonio @migelonio-codeman Автор вопроса

Ankhena, I'll pray for you

Написано более двух лет назад
Ankhena @Ankhena Куратор тега CSS

Павел migelonio, люблю, когда вопрос нафик не нужен самому спрашивающему )))

Написано более двух лет назад
Павел migelonio @migelonio-codeman Автор вопроса

Ankhena, gotcha

Написано более двух лет назад

Пригласить эксперта

Ответы на вопрос 1

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

HTML

+1 ещё

Простой
Почему не срабатывает анимация при исчезновение?
- 1 подписчик
- 2 часа назад
- 20 просмотров
1

ответ
HTML

+1 ещё

Средний
Как зафиксировать данные блоки, чтобы не было разрывов?
- 1 подписчик
- 7 часов назад
- 43 просмотра
0

ответов
HTML

+3 ещё

Простой
Возникла поломка файлов для установки пакетов в редакторе Atom, есть ли решение данной проблемы?
- 1 подписчик
- вчера
- 58 просмотров
1

ответ
CSS

Средний
Как загруглить края полосы прокрутки?
- 1 подписчик
- вчера
- 43 просмотра
0

ответов
JavaScript

+2 ещё

Простой
Вся секция заежает за header?
- 1 подписчик
- вчера
- 95 просмотров
1

ответ
CSS

Простой
Как в данном коде формируется высота блока?
- 1 подписчик
- 26 апр.
- 52 просмотра
1

ответ
CSS

Простой
Как убрать подчеркивание ссылки :hover?
- 1 подписчик
- 26 апр.
- 110 просмотров
0

ответов
JavaScript

+2 ещё

Средний
Возможно ли расположить или чтобы блок div мог заходить в прозрачный фон png фота?
- 1 подписчик
- 26 апр.
- 38 просмотров
1

ответ
CSS

Простой
Как сделать фон который слева сужается, справа расширяется?
- 1 подписчик
- 26 апр.
- 65 просмотров
2

ответа
CSS

+1 ещё

Простой
Bootstrap, как затемнить картинку?
- 1 подписчик
- 26 апр.
- 56 просмотров
0

ответов
Показать ещё Загружается…

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

React разработчик

Uptrade

от 150 000 до 200 000 ₽

Развернуть Python/Flask проект на сервере

28 апр. 2024, в 20:14

700 руб./за проект

Настроить лендинг

28 апр. 2024, в 20:09

9000 руб./за проект

Нарисовать GIF Banner

28 апр. 2024, в 19:54

2000 руб./за проект

Не зная разметку на ваш вопрос невозможно ответить.
Вы можете либо добавить её в вопрос либо самостоятельно почитать про селекторы отсюда htmlbook.ru/css/selector/descendant и далее (меню справа).

И вы зря занимаетесь стилизацией по id. Переходите лучше на классы, пока не поздно.
Павел migelonio,
А когда будет поздно?)
когда выяснится, что вы написали уже много кода и теперь нужно переделывать всё.

я могу добавить HTML файл

Как хотите, это ваш вопрос.
Павел migelonio, это что за...

В этом коде вообще нет title_party - это раз.
Валидатор плачет по этому коду горючими слезами - это два.
Не нужно выкладывать всю простыню, которая у вас есть - это три. Как прикажете угадать о которой из картинок речь?

Нужно взять кусочки кода касающиеся конкретной проблемы и сделать песочницу на jsfiddle.net
Павел migelonio, люблю, когда вопрос нафик не нужен самому спрашивающему )))

Answer 1 · 2022-02-09 02:43:38

Вам в комментариях правильно порекомендовали, в большинстве случаев лучше использовать классы, особенно когда блоки повторяются, по этому сделаю разметку на классах.
Допустим ваш блок имеет следующую HTML разметку:

<div class="halloween-partyIcon">
    <img src="путь-до-изображения" alt="...">
    <div class="title-party">Заголовок</div>
</div>

при такой разметке при помощи псевдокласса hover, вы не сможете реализовать, чтобы текст в "title-party" затемнялся при наведении на картинку. В данном случае можно затемнить этот текс при наведении на сам блок (обвертку) с картинкой, например так:

.halloween-partyIcon:hover .title-party{font-weight:bolder}

Псевдокласс hover?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт