2

Сделала меняющуюся иконку,( 3 шт) а она вместо того что бы меняться так как я задумала, все меняются на последнюю ( выделенную) ( сайт для понимания вопроса: "опыт, скорость, польза" : http://chistiysad.ru

<div class="mn-typo row">

    <div class="mn-typo-inner col-xs-12">
        <div class="col-md-4 mn-typo-ico">
                        <h3 class="mn-ico-title">ОПЫТ</h3>

          <a href="1" class="demoizo">
<img src="images/blueprint/logo/Без-имениа-5.png" />
</a>
  <style type="text/css">
.demoizo {
  display: block;
   text-align: center;
 }

.demoizo:hover, .demoizo:focus, .demoizo:active {
  background: url(images/blueprint/logo/Без-имени-5.png) no-repeat 50% 50%;
 }

.demoizo:hover img, .demoizo:focus img, .demoizo:active img  {
  background: transparent;
  visibility: hidden;
}
</style>



</div>

<div class="col-md-8 mn-typo-desc">
    <p>Все началось с одного очень упорного человека, который основал компанию, его имя - Иван Писков. Он много трудился, изучал, вдохновлялся, и наконец сумел сделать то, что ему действительно нравится, заниматься озеленением и заботиться о природе. Он, - это я сейчас, с маленьких частных заказов, я сумел создать фирму, объединенную общей идеей.</p><br><br><br>
</div>




<div class="mn-typo-inner col-xs-12">

    <div class="col-md-4 mn-typo-ico hidden-md hidden-lg">
        <h3 class="mn-ico-title">СКОРОСТЬ</h3>
        <a href="2" class="demoizo">
          <img src="images/blueprint/logo/1q.png" />
        </a>
<style type="text/css">
.demoizo {
  display: block;
 }

.demoizo:hover, .demoizo:focus, .demoizo:active {
  background: url(images/blueprint/logo/1.png) no-repeat 50% 50%;
 }

.demoizo:hover img, .demoizo:focus img, .demoizo:active img  {
  background: transparent;
  visibility: hidden;
}
</style>

        </div>

        <div class="col-md-8 mn-typo-desc">
            <p>Наша компания уважает ценности и опыт предыдущего поколения, опыт выработанный и отточенный. Но так же, вы идем в ногу со временем, благодаря анализу, в любой ситуации, наша команда найдет наиболее безопасное и оперативное решение.</p>
        </div>

        <div class="col-md-4 mn-typo-ico hidden-xs hidden-sm">
            <h3 class="mn-ico-title">СКОРОСТЬ</h3>
            <a href="2" class="demoizo">
<img src="images/blueprint/logo/1q.png" />
</a>
        </div>
    </div>

<div class="clearfix"></div>

    <div class="mn-typo-inner col-xs-12">
        <div class="col-md-4 mn-typo-ico">
            <h3 class="mn-ico-title">ПОЛЬЗА</h3>
           <a href="3" class="demoizo">
<img src="images/blueprint/logo/4.png" />
</a>
  <style type="text/css">
.demoizo {
  display: block;
 }

.demoizo:hover, .demoizo:focus, .demoizo:active {
  background: url(images/blueprint/logo/3.png) no-repeat 50% 50%;
 }

.demoizo:hover img, .demoizo:focus img, .demoizo:active img  {
  background: transparent;
  visibility: hidden;
}
</style>

        </div>

        <div class="col-md-8 mn-typo-desc">
            <p>Самое главное для нас - забота о природе. Всем известно, чтобы что то получилось хорошо, нужно вкладывать свои силы. Мы предлагаем комплексные решения по обработки территории от вредителей, так же поможем Вам с обрезкой плодовых деревьев. Мы трудимся для развития вашего сада.</p>
        </div>
    </div>

    <div class="clearfix"></div>    

</div>
</div>

Обновление

У меня только при таком коде иконки остались под названиями ( опыт, скорость) при другом исходе оно все съезжает. col-md-8 mn-typo-desc т.е вот эти классы нужно менять?

Обновление

Куда нужно вставлять ? B остальные, это какие?

<div class="mn-typo-inner col-xs-12 experience">
    <div class="col-md-4 mn-typo-ico">
                    <h3 class="mn-ico-title">ОПЫТ</h3>


      <a href="1" class="demoizo">
<img src="Б-5.png" />
</a>
  <style type="text/css">
.demoizo {
  display: block;
   text-align: center;
 }

.experience .demoizo:hover, .experience .demoizo:focus, .experience .demoizo:active {
  background: url(Без-им5.png) no-repeat 50% 50%;
 }

.demoizo:hover img, .demoizo:focus img, .demoizo:active img  {
  background: transparent;
  visibility: hidden;
}
4
  • Дайте каждой иконке какой-нибудь отличительный класс и применяйте нужный вам .demoizo:hover к этому классу. А сейчас вы просто перезатерли предыдущие стили (т.е. картинки), потому так и получается
    – BOPOH
    23 окт 2015 в 8:49
  • Ну, например, для опыта: <div class="mn-typo-inner col-xs-12 experience">, а в стилях пишите .experience .demoizo:hover, .experience .demoizo:focus, .experience .demoizo:active { background: url(images/blueprint/logo/Без-имени-5.png) no-repeat 50% 50% } Аналогично и для других делаете
    – BOPOH
    23 окт 2015 в 9:01
  • Спасибо огромное, подскажите еще, а как сделать что бы иконка задняя, не появлялось слева направо, а статично была под картинкой?
    – Катя
    23 окт 2015 в 9:09
  • самый простой способ: .experience a {transition: none } (кроме transition надо перечислить и остальные варианты из css, т.к. движение из-за этого происходит)
    – BOPOH
    23 окт 2015 в 9:35

2 ответа 2

1

Изменение иконки нужно делать в css, если на иконку идет ссылка, то вы пишите в css:

a:hover {
    background: url(ссылка на изображение);
}
0

Решение -

a:hover{
 background: url(image)

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.