X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> как при наведении на блок div зажечь внутри этого блока кнопку
Neptun_hb
Neptun_hb
Topic Starter сообщение 15.1.2019, 19:32; Ответить: Neptun_hb
Сообщение #1


Здравствуйте!
Подскажите пожалуйста, не выходит каменный цветок :-(
Задача такая: Есть несколько небольших div блоков с описанием и картинками. Внизу каждого есть кнопка. Которая пока загорается только при наведении на нее курсора. А надо чтобы она зажигалась при наведении курсора на родительский div.
Вот код если интересно
<div class="tovar">
<img src="img/reg.jpg">
<h4>Заголовок товара</h4>
<center> <div class="line"></div>
<h5>Текст</h5></center>
<br>
<div class="button" aligh:"center">ПОДРОБНЕЕ</div>
</div>

[CSS]
.tovar{
float:left;
background:white;
width: 293px;
height: 340px;
margin-left:20px;
margin-right:20px;
margin-bottom:40px;
border:1px solid #d8d8d8;
display:inline;
}
.tovar:hover{
border:1px solid #346AE8;
}
.line{
border: none; /* Убираем границу */
background-color: #d8d8d8; /* Цвет линии */
color: #d8d8d8; /* Цвет линии для IE6-7 */
height: 1px; /* Толщина линии */
width: 90%;
}
.button{
color:#346AE8;
border:2px solid #346AE8;
width:150px;
font-weight: bold;
text-align:center;
margin-bottom:20px;
margin-left:20px;
padding-top:5px;
padding-bottom:5px;
transition: 0.15s linear;
}
.button:hover{
background: #346AE8;
color:white;
}
[/CSS]

Спасибо!
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Degradator
Degradator
сообщение 16.1.2019, 13:31; Ответить: Degradator
Сообщение #2


button {
background: blue;
}
div:hover > button {
background: yellow;
}

https://code.tutsplus.com/ru/tutorials/the-...rize--net-16048
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Neptun_hb
Neptun_hb
Topic Starter сообщение 17.1.2019, 15:33; Ответить: Neptun_hb
Сообщение #3


(Degradator @ 16.1.2019, 16:31) *
button {
background: blue;
}
div:hover > button {
background: yellow;
}

https://code.tutsplus.com/ru/tutorials/the-...rize--net-16048


ОФИГЕННО!!!!!! Спасибо тебе милая обезьянка :rolleyes: (я про аватар ;-) )
Даже и представить не мог, что Css умеет строить логические цепочки.

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

div.tovar:hover > .button { }

То есть без всего div, потом в зависимости от класса или идентификатора решётка или точка название , ну и так далее

Еще раз спасибо тебе.!
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Neptun_hb
Neptun_hb
Topic Starter сообщение 17.1.2019, 23:36; Ответить: Neptun_hb
Сообщение #4


Прошу еще раз прощения, появилась идея, подскажите, реализуема ли она в css?
Код тот же. И теперь при наведении на основной блок, зажигается и кнопка. А можно ли выстроить логику, чтобы при нажатии на основной блок, нажималась и сама кнопка?
то есть сейчас действие срабатывает непосредственно при нажатии на кнопку, а хотелось бы на сам блок. Для реализации я вижу 2 варианта:
1. Это прописать какую-то логику, связывающую Hover на кнопке и основном блоке
2. ну либо привязывать всё основное действие на основной блок:hover. Конечно это наверное, самый простой способ, но интересно попробовать реализовать по другому.

Или это извращение? :unsure:
Спасибо
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Salikhoff_hb
Salikhoff_hb
сообщение 18.1.2019, 4:03; Ответить: Salikhoff_hb
Сообщение #5


Neptun, так ты попробуй оба варианта сперва, зачем же писать не проверив

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Как вывести деньги в Украине с заблокированного Юмани ?
28 freeax 4583 12.4.2024, 1:22
автор: PostMan1
Горячая тема (нет новых ответов) Как вы отдыхаете от работы за компом
148 adw-kupon.ru 19664 8.4.2024, 10:37
автор: Skyworker
Открытая тема (нет новых ответов) Как вы бросили работу и перешли на заработок с сайтов?
18 uahomka 3072 5.4.2024, 5:53
автор: Skyworker
Горячая тема (нет новых ответов) Как бездомные хранят деньги?
81 metvekot 13630 31.3.2024, 12:44
автор: Boymaster
Открытая тема (нет новых ответов) Мегамаркет. Скидка 1000 рублей при покупке от 5000 рублей на все, на первый заказ.
Мегамаркет. Скидка 1000 рублей при покупке от 5000 рублей на все, на п
7 stu999 1752 31.3.2024, 11:19
автор: stu999


 



RSS Текстовая версия Сейчас: 16.4.2024, 22:25
Дизайн