Псевдокласс 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

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

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

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

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

JavaScript

+2 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- 8 часов назад
- 49 просмотров
2

ответа
HTML

+2 ещё

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

ответа
HTML

+1 ещё

Простой
Правильно ли с точки зрения семантики БЭМ я расставляю wrapper'ы и вообще называю дивы?
- 1 подписчик
- вчера
- 82 просмотра
0

ответов
HTML

+1 ещё

Простой
Как установить одну и ту же ширину элементов в разных блоках?
- 1 подписчик
- вчера
- 71 просмотр
1

ответ
HTML

+1 ещё

Простой
Как расположить контент сайта на всю высоту?
- 1 подписчик
- вчера
- 55 просмотров
1

ответ
HTML

+1 ещё

Простой
Паддинг и Маргин ломает длину и ширину, не получается выставить отступы внутри блока?
- 1 подписчик
- вчера
- 60 просмотров
1

ответ
CSS

Простой
Можно ли в CSS сгладить углы при использовании border-radius?
- 1 подписчик
- вчера
- 95 просмотров
1

ответ
CSS

+2 ещё

Простой
Как корректно настроить Gulp + Sass?
- 1 подписчик
- 21 нояб.
- 72 просмотра
2

ответа
HTML

+1 ещё

Простой
Как разместить элементы с разных блоков, чтобы они перекрывали друг друга?
- 1 подписчик
- 21 нояб.
- 58 просмотров
1

ответ
CSS

Простой
Как сделать border со смещением?
- 1 подписчик
- 20 нояб.
- 101 просмотр
1

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

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

Trainee - IT Support

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

от 2 000 до 4 000 $

Поправить сайт (мобильная версия) на WordPress

24 нояб. 2024, в 04:16

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

Необходимо поменять пароль в WINDOWS

24 нояб. 2024, в 03:11

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

Требуется консультация по UX-дизайну казино

24 нояб. 2024, в 01:35

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

Не зная разметку на ваш вопрос невозможно ответить.
Вы можете либо добавить её в вопрос либо самостоятельно почитать про селекторы отсюда 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?

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

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

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