Hello, do not tell me why when you hover on a link the picture in arr3 does not change and vice versa when you hover on the picture, change the picture (# arr3) and the text color

.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>

  • # arr3 you img ie the image is a regular picture, in general a photo and how do you want to give the image a background ie a background? .imgBottom:hover #arr3 it = <img src="" id="arr3"/> this is user33274
  • can you like that? codepen.io/Geyan/pen/XKPWjE?editors=110 - user33274

1 answer 1

Do this:

  .imgBottom a:hover { color:#2987ac; }
  • this does not work if only because inside img you cannot put a - Grundy
  • Please try to write more detailed answers. I am sure the author of the question would be grateful for your expert commentary on the code above. - Nicolas Chabanovsky ♦