hover for two blocks



  • Hey, don't tell me why the reference does not change the picture in arr3 and vice versa when it comes to the picture, change the picture(#arr3) and the colour of the text.

    .imgBottom{
     width: 141px;
     height: 130px;
     margin-top: 20px;
     margin-left: 22px;
     float: left;
     color:#2987ac;
     font-size: 12.3px;
      background-color:gray;
    

    }
    .imgBottom a{
    top:10px;
    position: relative;
    color:black;
    font-size: 12.3px;

    }

    .imgBottom:first-child{
    margin-left: 19px;
    }
    .imgBottom #arr ,#arr1,#arr2,#arr3,#arr4,#arr5,#arr6{
    position:relative;
    top:12px;
    left:6px;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    color:#fff;

    }
    .imgBottom :hover {
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    color:#2987ac;

    }

    .imgBottom #arr3
    background:url(http://iconspot.ru/image.php?width=128&height=128&crop=none&id=13940);
    }
    .imgBottom:hover a {
    color:#2987ac;
    }
    .imgBottom:hover #arr3 {
    background:url(http://s1.iconbird.com/ico/0612/GooglePlusInterfaceIcons/w128h1281338911640arrowright2.png);
    cursor:pointer;
    }

    <div class="imgBottom"><img src="https://static-s.aa-cdn.net/img/ios/990114226/e92aea60b7b085c70a9d17ed59b38eea?v=1" >
    <a href="#">Строительство и логистика</a>
    <img src="" id="arr3"/>
    </div>



  • Do it like that:

        .imgBottom a:hover {
        color:#2987ac;
    }
    



Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2