Change another element on hover or click, how?

Question

css

Actually the question is in the title.

A little more detail:

In the header of the site, let's say the layout of the machine will be located on the left and the text, menu on the left.

It is necessary to make it so that when you hover (or click) on a certain element in the car, for example, on a motor, the information on the side changes to another, and so on, i.e. when you hover or click on the wheel, info changes.

Suggest a similar library?

P/S: I WILL CLARIFY THAT JQUERY I AM FULL 0 :)

Answer 1

jquery is there for that.

Answer 2

You need to do it through display none, here is an example: http://mentor-framework.ru/slider/
This menu is made according to this principle,

Answer 3

An image map, plus, for example, a data attribute and you get something like this

<p class="info"></p>
<img alt="mashyna_taksy_nakleika_1_.jpg" src="http://i.piccy.info/i9/af7fb3ee41ec62c9160e3d6e8aec99c6/1445302105/40502/962048/mashyna_taksy_nakleika_1_.jpg" usemap="#myMap" width="459" height="459" />
<map name="myMap" id="myMap">
    <area shape="circle" coords="104,273,35" data-info="переднее колесо" />
    <area shape="circle" coords="351,272,36" data-info="заднее колесо"/>
    <area shape="poly" coords ="100,207,132,191,174,175,207,172,265,172,318,175,365,189,379,194,373,211,108,212"  data-info="стекло"/>
</map>

var output = $('.info'); // куда выводим
$('area').on({
    mouseenter: function(){
        output.text('Навели на ' + $(this).data('info'));
    },
    mouseleave: function(){
        output.text(''); // если надо...
    }
});