Перейти к содержимому



Проблемы с css

#1 Loyrenc
Loyrenc
  • Пользователь
  • 8 сообщений
  • Репутация: 0
0

Отправлено 06 Ноябрь 2019 - 19:52

<div class="gallery">
<a target="_blank">
<img src="images/55551556.jpg" alt="Cinque Terre" width="200" height="200">
</a>
<Button class="desc">Купить</button>
</div>
div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 200px;
}
div.gallery:hover {
  border: 1px solid #000;
}
div.gallery img {
  width: 100%;
  height: auto;
}
button.desc {
    left:0;
    bottom:0;
    right:0;
    top:0;
padding: 15px;
text-align: center;
display: none;
width: 30px;
}
button:hover.desc {
  padding: 15px;
  text-align: center;
  display: block;
}




Кнопка не появляется при наведении помогите :-;

 

При наведении на картинку я плохо знаю css

 

Сообщение отредактировал BLIK: 06 Ноябрь 2019 - 20:30
вставил код

  • 0

#2 BLIK
BLIK
  • Супермодератор
  • 4 546 сообщений
  • Репутация: 1040

Отправлено 06 Ноябрь 2019 - 20:33

@Loyrenc,По коду поставьте слово Button  с маленькой буквы вот тут

<Button class="desc">Купить</button>

И непонятно, что значит не появляется кнопка при наведении, наведении чего?


  • 0

Качественный хостинг   Тут может быть ваша ссылка.



#3 ShowPrint
ShowPrint
  • Пользователь PRO
  • 3 376 сообщений
  • Репутация: 978

Отправлено 06 Ноябрь 2019 - 20:42

@Loyrenc, а точнее конкретизировать задачу? При наведении на что должна появляться кнопка?

Если при наведении на саму кнопку, то не будет такого - она скрыта "display:none" : нет кнопки => нет события "наведения" => нет и появления кнопки.

 

Ну и правило

button:hover.desc

насколько я понимаю должно писаться так:

button.desc:hover

@BLIK, вот и я о том же  :)

поставьте слово Button  с маленькой буквы
Вроде бы как-то не особо принципиально должно быть (если не ошибаюсь)...

@Loyrenc, если я правильно понял задачу, то "на коленке" (быстро и "криво" - подчистите) наверное нужно что вроде этого? Тынц здесь...


Сообщение отредактировал ShowPrint: 06 Ноябрь 2019 - 20:35

  • 1
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#4 Artos
Artos
  • Пользователь
  • 116 сообщений
  • Репутация: 14

Отправлено 06 Ноябрь 2019 - 20:42

Может потому, что правило display: block; делает элемент блоком и на видимость ни как не влияет?

Попробуйте visibility: visible и visibility: hidden;


Сообщение отредактировал Artos: 06 Ноябрь 2019 - 20:44

  • 0

#5 Loyrenc
Loyrenc
    Topic Starter
  • Пользователь
  • 8 сообщений
  • Репутация: 0

Отправлено 07 Ноябрь 2019 - 15:14

@ShowPrint,а можете сделать кнопку по середине  


  • 0

#6 Rexxar
Rexxar
  • Пользователь
  • 647 сообщений
  • Репутация: 36

Отправлено 07 Ноябрь 2019 - 17:25

Установите бекграунд для кнопки, может выше были другие кнопки и они прозрачные. 


  • 0


#7 ShowPrint
ShowPrint
  • Пользователь PRO
  • 3 376 сообщений
  • Репутация: 978

Отправлено 07 Ноябрь 2019 - 17:52

@Loyrenc, так? Тынц здесь...

 

Если нет, то один из двух вариантов:

  1. понятно для остальных описываете что вы хотите получить

  2. ищите "таблетку счастья" самостоятельно

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

Читать мысли на расстоянии я не умею, к сожалению. Хотя скорее всего "к счастью"  :)


  • 2
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#8 Loyrenc
Loyrenc
    Topic Starter
  • Пользователь
  • 8 сообщений
  • Репутация: 0

Отправлено 07 Ноябрь 2019 - 18:39

@ShowPrint,да спасибо)) 


  • 0

robot
robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Похожие темы
  Название темы Автор Статистика Последнее сообщение

Пользователь месяца
NataliaAntalia NataliaAntalia 1-й за Октябрь
Очков активности: 480 2 темы, 58 сообщений, 5 баллов репутации
Сайт: zdorovemedicina.ru
ТОП самых активных за этот месяц
  • Фотография ShowPrint
    #1

    ShowPrint (ShowPrint.ru)
    Очков активности: 448.5 0 тем, 23 сообщения, 13 баллов репутации

  • Фотография BLIK
    #2

    BLIK
    Очков активности: 283.5 0 тем, 21 сообщение, 9 баллов репутации

  • Фотография Vmir
    #3

    Vmir
    Очков активности: 270 3 темы, 27 сообщений, 5 баллов репутации

  • Фотография Totti
    #4

    Totti
    Очков активности: 231 1 тема, 19 сообщений, 7 баллов репутации

  • Фотография MattCutts
    #5

    MattCutts (dmitrylee.ru)
    Очков активности: 166.5 Вне конкурса за определение пользователя месяца

  • Фотография Megoydagi
    #6

    Megoydagi (24ho.ru)
    Очков активности: 157.5 6 тем, 17 сообщений, 3 балла репутации

  • Фотография NataliaAntalia
    #7

    NataliaAntalia (zdorovemedicina.ru)
    Очков активности: 138 Вне конкурса за определение пользователя месяца

  • Фотография miketomlin
    #8

    miketomlin
    Очков активности: 78 0 тем, 13 сообщений, 4 балла репутации

  • Фотография TimurR
    #9

    TimurR
    Очков активности: 39 3 темы, 4 сообщения, 2 балла репутации

  • Фотография kolver
    #10

    kolver
    Очков активности: 24 3 темы, 7 сообщений, 1 балл репутации

  • Показать весь ТОП 10
Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 29.10.2019
  • Яндекс выдача: 17.11.2019
Топ 5 участников по репутации

Оформление форума – IPBSkins.ru