jquery - 複数の変数から jQuery セレクターを構築する

Question

2 つの変数からセレクターを構築することで、jQuery コードの反復を少なくしようとしています。

クラス「凡例」と 2 番目のクラス名を 2 つの別々の変数に入れ、それらを 1 つのセレクターとして結合したいと思います。

私のHTML

 <div class="legend a">
    <div class="icon"></div>
        <p class="description">Autmotive</p>
    <div class="switch"></div>
 </div>
 <div class="legend b">
    <div class="icon"></div>
        <p class="description">Power Conversion</p>
    <div class="switch"></div>  
 </div>
 <div class="legend c">
    <div class="icon"></div>
        <p class="description">Charger Switches</p>
    <div class="switch"></div>
 </div>

私のjQuery

$('.legend.a').hover(
  function () { $('.call-out.a').find('.icon').addClass('hover')},
  function () { $('.call-out.a').find('.icon').removeClass('hover')}
);

$('.legend.b').hover(
  function () { $('.call-out.b').find('.icon').addClass('hover')},
  function () { $('.call-out.b').find('.icon').removeClass('hover')}
);

$('.legend.c').hover(
  function () { $('.call-out.c').find('.icon').addClass('hover')},
  function () { $('.call-out.c').find('.icon').removeClass('hover')}
);

私は試した：

var firstClass = $('.legend').attr('class').split(' ')[0];
var secondClass = $('.legend').attr('class').split(' ')[1];
var legend = $('.'+ firstClass +'.'+ secondClass +'');

しかし、それはすべての要素を対象としています。legend.a、b、または c を個別にターゲットにするにはどうすればよいですか?

ありがとう