jquery - CSS 过渡 : control other div

Question

我有一个 CSS 过渡，可以在悬停时增加元素的大小，但我也希望它能控制相应的文本。我需要使用 jQuery 吗？我尝试了 <div1> + <div2> {}符号，但没有运气。

My Fiddle

<div class="row glyph-belt">
<div class="rectangle-container col-xs-8 col-xs-offset-2">
        <div id="rectangle"></div>
    </div>


    <div class="glyph-title-row">

        <div class="col-xs-3 circle-1">
            <div class="container circle-container">
                <i class="icon-steak glyph-custom" style="font-size: 60px"></i>
            </div>
        </div>

        <div class="col-xs-3 circle-2">
            <div class="container circle-container">
                <i class="icon-brain glyph-custom" style="font-size: 60px"></i>
            </div>
        </div>

        <div class="col-xs-3 circle-3">
            <div class="container circle-container">
                <i class="icon-happy glyph-custom" style="font-size: 60px"></i>
            </div>
        </div>

    </div>
</div>

<div class="row glyph-title-row">
    <div class="col-xs-3 glyph-title-container glyph-title-container-1">Blah blah blah</div>
    <div class="col-xs-3 glyph-title-container glyph-title-container-2">blah Blah blah</div>
    <div class="col-xs-3 glyph-title-container glyph-title-container-3">blah blah Blah</div>
</div>

Answer 1

试试这个 https://jsfiddle.net/qE9kJ/196/

JS

$('.circle-1').hover(function() {
    $('.glyph-title-container-1').toggleClass('big-font');
});

$('.circle-2').hover(function() {
    $('.glyph-title-container-2').toggleClass('big-font');
});

$('.circle-3').hover(function() {
    $('.glyph-title-container-3').toggleClass('big-font');
});

CSS

.big-font {
  font-size: 25px;
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
}

.glyph-title-container {
  font-size: 18px;
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
}