0

recently I created this animation using jQuery: https://jsfiddle.net/Sempervivum/jhsmumxt/1/ (hover TITLE1 or TITLE2)

var w = Math.floor($("#wrapper").width()) - 10;
    $("#innerleft").mouseenter(function(){
    $("#left").animate({width: Math.floor(w * 0.75) + "px"}, 2000);
    $("#right").animate({width: Math.floor(w * 0.25) + "px"}, 2000);
});
$("#innerright").mouseenter(function(){
    $("#left").animate({width: Math.floor(w * 0.25) + "px"}, 2000);
    $("#right").animate({width: Math.floor(w * 0.75) + "px"}, 2000);
});

However my clients provider doesn't allow for javascript and therefore I would have to switch to CSS animations. No problem to create a single one but here I'm needing two different animations started at the same time: Hovering #innerleft starts animation of #left and #right with different parameters and vice versa. Is this possible when using pure CSS?

Sempervivum
  • 928
  • 1
  • 9
  • 21
  • It's not possible to change the parent (`#left` or `#right`) based on the child's `:hover` pseudo class. (http://stackoverflow.com/questions/45004). Might be possible if it's okay to expand/contract based on the hover state of the resizing element itself. – danasilver Feb 15 '16 at 22:53
  • Thanks for this answer. Would be OK using hover on the parent containers #left and #right. My main problem is starting animation of e. g. #right when hovering #left. – Sempervivum Feb 15 '16 at 23:02
  • ... like in this fiddle: https://jsfiddle.net/Sempervivum/jhsmumxt/2/ – Sempervivum Feb 15 '16 at 23:09
  • Here's a fork of your fiddle with CSS-only resizing for both divs simultaneously. Doesn't keep the resized state, though. https://jsfiddle.net/vja85zgL/ – danasilver Feb 15 '16 at 23:13
  • That's kind of tricky but fine. Many thanks for this solution. Maybe this is already sufficient. However a solution keeping the last status would be fine but I'm afraid that it's not possible. – Sempervivum Feb 15 '16 at 23:26
  • Tried to implement some modifications: https://jsfiddle.net/Sempervivum/vja85zgL/2/ 1. Swith to horizontal orientation: Works. 2. Limit the hovering area horizontally by reducing the width of #wrapper: Does not work. Hovering is active for the whole width. Why does this not work? 3. Tried to bring #wrapper to front by z-index: Does not work. Why? – Sempervivum Feb 16 '16 at 16:14

0 Answers0