CSS轉換：控制其他div

我有一個CSS過渡，增加了懸停時元素的大小，但我也想要它來控制相應的文本。我需要使用jQuery嗎？我嘗試了<div1> + <div2> {}表示法，但沒有運氣。CSS轉換：控制其他div

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

來源

2015-10-17 Jeremy Thomas

請添加一塊'css'和'html'所以我們更好地瞭解它應用到結構。 – Thaillie

對應的文字是圖片上方的文字以及您想要的文字嗎？ –

我希望文字以與圓相同的方式縮放 –

試試這個https://jsfiddle.net/qE9kJ/196/

$('.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; 
}

來源

2015-10-17 14:24:50

有可能使用+選擇符號，你提到的控制連續兄弟。

如果重新安排你的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; 
}

來源

2015-10-17 14:19:26 Ryan

我認爲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'); 
});

來源

2015-10-17 15:08:28 iplus26

CSS轉換：控制其他div

回答

相關問題