Динамический Flex с 3 элементами

-1

У меня есть ряд элементов, которые мне нужно ответить по ширине, когда они зависнут. В строке есть 3 элемента, и я использую -webkit-flex, чтобы выполнить первоначальный стиль каждого из них. Значение первого элемента установлено на «2», а два других элемента равны значению «1».Динамический Flex с 3 элементами

Я хочу, чтобы он отвечал на зависание следующим образом: - mouse over element1 - ничего не происходит (потому что он установлен в значение -webkit-flex «2»). - mouse over element2 - element1 становится значением «1», а element2 становится значением «2». - mouse over element3 - element1 становится значением «1», а element3 становится значением «2».

Я также хочу, чтобы он ответил после того, как исходный элемент был изменен на один: - (element2 = значение «2») мышь над элементом3 - element2 = 1 и element3 = «2». - и т.д.. ,

Если возможно, я хотел бы сделать это с помощью CSS. Я понимаю, что это может быть слишком динамично для CSS для обработки, и мне приходится обращаться с JS.

Спасибо заранее!

Вот простой пример:

HTML

<body> 
    <div id="wrapper"> 
     <div id="element1"> 
      <!--Title--> 
     </div> 
     <div id="element2"> 
      <!--Title--> 
     </div> 
     <div id="element3"> 
      <!--Title--> 
     </div> 
    </div> 
</body>

CSS

#wrapper { 
    display: -webkit-flex; 
} 

#wrapper div { 
    height: x; 
} 

     /****Element Flex Rules****/ 
     #wrapper element1 { 
      -webkit-flex: 2; 
     } 

     #wrapper element2 { 
      -webkit-flex: 1; 
     } 

     #wrapper element3 { 
      -webkit-flex: 1; 
     }

источник

2014-10-13 Blue

Это просто немного запутанным. Что именно вы пытаетесь достичь? Похоже, вы пытаетесь использовать условную логику? –

Ваш вопрос был немного запутанным. Я создал скрипку, основанную на том, что я мог бы извлечь из вашего объяснения.

Он использовать JQuery, очень простой JQuery, однако:

Когда мышь входит в DIV внутри контейнера добавляет класс называется .wrapper-колебались. Это устанавливает ширину контейнера на 200%, а при наведении мыши на любой из его братьев и сестер, он удаляет класс из них, и добавляет его к элементу вы парил над

$(document).ready(function() { 
    $("#wrapper div").hover(function(){ 
     $(this).addClass("wrapper-hovered"); 
     $(this).siblings("div").removeClass("wrapper-hovered") 
    }); 

});

http://jsfiddle.net/zuwejwqv/1/

источник

2014-10-13 21:27:53

Будет ли это работать и на ul и li? – Blue

да, сэр! измените экземпляры div на ul или li по мере необходимости! убедитесь, что у вас есть права на родительские/дочерние ссылки –

Динамический Flex с 3 элементами

ответ

Смежные вопросы