Sign in to follow this  
Jo_Sky

Стиль активной кнопки. Проблемы с заменой канртинки

Recommended Posts

Здравствуйте! Возникла небольшая проблема с вёрсткой.

 

 

Есть html:

<div class="best">  

 

<div class="slider">
<img src="img/food.png">
</div>

 

</div>

 

Есть css:

.slider:active > img

{

background-image: url("../img/block.png")

}

 

Моя цель, чтобы на картинку, которая из html загружался сферху фон из css (block.png) по клику. 

 

Но выходит так, что фон (block.png) загружается за картинкой из html (food.png) и ощущение, что ничего не происходит. 

Share this post


Link to post
Share on other sites

<div class="best">

<div class="slider">

<div></div>

</div>

</div>

.slider > div

{

background-image: url("../img/food.png")

}

.slider:active > div

{

background-image: url("../img/block.png")

}

Share this post


Link to post
Share on other sites
<div class="best">   <div class="slider"><div></div></div> </div>
.slider > div{background-image: url("../img/food.png")}.slider:active > div{background-image: url("../img/block.png")}

Спасибо за ответ! Но, к сожалению, мне необходимо хранить ссылку на картинку именно в html.

Может быть есть ещё какие-нибудь мысли или идеи?

Share this post


Link to post
Share on other sites

Хотя, это не столь важно hover или active. Больше хотелось бы, чтобы вторая картинка просто всавлялась сверху, а не заменялась.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Similar Content

    • By Vic-Tor
      Всем привет!
      Может кто помочь, всунуть языковую кнопку на сайт. Сайт делал из шаблона, в html соображаю не очень сильно.
      Я так понимаю, можно сделать типа поддомен для другого языка или как проще?  Сайт ТУТ.
      Спасибо!
    • By Evsey
      Доброго дня всем матерым верстальщикам.
      Есть задача сделать табличку графика на сайт. Технологии - понятно, что html и css. Табличка не большая, но с особенностями.
      А именно, в табличке есть группы объединенных ячеек, при чем не только внутри строк, но и между строками (объединяется несколько строк). Табличку прикрепил.
      Каркас table tr td без объединения ячеек могу сделать, но нужно объединить.
      Как правильнее всего сделать такое объединение? Было бы классно, чтобы ответ был сразу с примерами.

    • By AlexGreat
      Здравствуйте ! Имеется принципиальный вопрос о выравнивании внутри блока шрифтовой иконки . Вопрос трудно объяснить с помощью текста, поэтому прикрепляю видеовопрос для наглядности - (видео чуть более минуты). 
      https://drive.google.com/open?id=1zHWLnroXsaO5TocvUt07Wv6DHauZdBqJ
      Заранее спасибо за ответ! 
  • Member Statistics

    46,303
    Total Members
    3,128
    Most Online
    xakerfsb
    Newest Member
    xakerfsb
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.