CSS 过渡：控制其他 div

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

可以使用您提到的 + 选择器符号来控制连续的同级。

如果您重新排列 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 2

试试这个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 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

CSS transition: control other div

html

css

jquery

css-transitions