Question

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

<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;
}

Answer 2

如您所述，可以使用+选择符表示法控制连续的兄弟。

如果您重新排列HTML，使其看起来像这样：

 <div class="container circle-container circle-1">
     <i class="icon-star" style="font-size: 60px"></i>
 </div>
 <div class="col-xs-3 glyph-title-container glyph-title-container-1">
     Real Food. Real Weightloss.
 </div>

然而，重新排列HTML意味着您必须重做很多CSS才能重新获得所需的外观。

您可以使用以下CSS在悬停时顺利转换这两个项目：

.circle-container:hover,
.circle-container:hover + .glyph-title-container {
    -webkit-transform: scale(1.25); 
    -moz-transform: scale(1.25);
    -o-transform: scale(1.25);
    transform: scale(1.25);
}
.circle-container,
.glyph-title-container {
    -webkit-transition: transition .5s ease-in-out;
    -moz-transition: transition .5s ease-in-out;
    -o-transition: transition .5s ease-in-out;
    -ms-transition: transition .5s ease-in-out;
}

Answer 3

我认为jQuery会让它变得更容易。（上帝，我一直很长时间没有写jQuery ......）

以下是更新后的jsfiddle。

只需将以下代码添加到JavaScript代码中：

$('.circle-container').hover(function () {
  i = $(this).index() - 1;
  $($('.glyph-title-row div')[i])
    .css('color', 'blue');
}, function () {
  $($('.glyph-title-row div')[i])
    .css('color', 'black');
});

CSS过渡：控制其他div

3 个答案: