<div class="menuHref"><a href="#">Бизнес-планирование</a><img src="arrow.png"></div>

tell me how to make the text of the link colored when you hover over the link and another picture is loaded in img, and vice versa, when you hover over the picture - the picture and the link color changed

    3 answers 3

    https://api.jquery.com/hover/

     $(".menuHref").hover( function() { //mousein var $target = $(this) $target.find("a").css("color", "red");//new color $target.find("img").attr("src", "new_image_link");//new image }, function() { //mouseout var $target = $(this) $target.find("a").css("color", "");//restore color $target.find("img").attr("src", "old_image_link");//restore old image } ) 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="menuHref"><a href="#">Бизнес-планирование</a><img src="arrow.png"></div>

      Better to do it through CSS. There will be the following rules:

       .menuHref a { } .menuHref img{ } .menuHref:hover a { } .menuHref:hover img{ }

      Then the hover rules will be applied when hovering over the whole block (on the image and on the link). And the picture is also better to specify in CSS.

      For JS, if that decision is the same - hang the event on the general container and change the properties of the "children" already.

         $(".rightCenter").hover( function() { //mousein var $target = $(this) $target.find("a").css("color", "red");//new color $target.find("img").attr("src", "new_image_link");//new image }, function() { //mouseout var $target = $(this) $target.find("a").css("color", "");//restore color $target.find("img").attr("src", "old_image_link");//restore old image } ) 
         a{ color:#fdfbfb; text-decoration: none; transition: all 0.4s; cursor: pointer; } a:hover{ cursor: pointer; color: #2987ac; transition: all 0.4s; } .active-link{ transition: all 0.4s; vertical-align: middle; } 
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="rightCenter"> <div id="bel" onClick="myFunction()" style="display:none"> <a href="#" class="active-link" id="aclb">БЕЛАРУСЬ</a> <div class="rightBottom" id="b_phone"> +3-211-111-111-11 </div> </div> <img src="img/top.png" class="arrow_top" id="art" > <div id="russ" onClick="myFunction2()" style="display:none"> <a href="#" class="active-link" id="aclr">РОССИЯ</a> </div> </div>

        What is the problem?