Как убрать скругление?

Question

[Александр]

Добрый день. Есть выпадающее меню на css. Подскажите пожалуйста как убрать с помощью js border-radius справа основного меню, когда всплывает под-меню с первого пункта? Что бы получилась сплошная полоса. Решение на css не подходит, нужно чтобы скругление не показывалось, пока курсор находится на 2-ом подменю. Как только курсор убираешь, должно появится.


Решение css не подходит:

Comments

[Алексей Шашенков]

А код? Кто его как у вас элементы, возможно достаточно css

[Александр]

Вот код https://jsfiddle.net/s2pznzsg/2/

Answer 1

[Александр]

one_day: Добавил hover, но он не подходит, когда убираешь с первого меню на второе подменю, то скругление пропадает, а нужно что бы оно оставалось пока курсор на втором подменю

Comments

[one_day]

добавьте еще стиль при ховере в допменю - родителю радиусы,
если нужно выравнивать только на первом пункте и последнем то:
псевдокласс :first-child и :last-child

можете дать код свой разметки, чтоб что-то конкретное сказать?

[one_day]

.menu1 .menu2:first-child:hover {
border-radius: 10px 0 10px 10px
}

[Александр]

one_day: https://jsfiddle.net/s2pznzsg/2/

[one_day]

body{
    margin:90px;
}

a {
     color: #fff;
    font-size:20px;
    text-decoration: none;
 }
 
ul#menu{
    margin:0;
    padding:0;
    display: inline-block;
    width: 200px;
    background: #3d3e40;
    border-radius:10px;
}
ul#menu li {
    list-style: none;
    position: relative;
    padding:0;
}

ul#menu li {
     color: #fff;
    font-size:20px;
    text-decoration: none;
    padding:6px 15px;
    display: block;
    border-top:1px solid #c4c4c4;
 }
ul#menu li:first-child{
    border:none;
}

ul#menu li:hover{
    background: #d00000;
}
ul#menu > li:first-child:hover{
    border-radius:10px 10px 0 0;
 }
ul#menu > li:last-child:hover{
    border-radius: 0 0 10px 10px;
}

ul#menu li ul{
    display: none;
    padding:0;
}
ul#menu li:hover ul {
    width: 150px;
    display: block;
    position: absolute;
    background-color: #28282a;
    border-radius:0 10px 10px 0;
    left: 200px;
    top:1px;
    z-index:1;
}



ul#menu li>ul > li:first-child:hover{
    border-radius:0 10px 0 0;
}
ul#menu li>ul > li:last-child:hover{
    border-radius:0 0 10px 0;
}

ul#menu:hover li:first-child{
 border-radius: 10px 0 0 0;
}

[Александр]

one_day: Не работает почему то

[one_day]

Александр:
https://codepen.io/one_day/pen/prwyYX

[Александр]

one_day: От блин, то я с селекторами напутал. Спасибо большое за помощь. !!))) Очень благодарен)

Answer 2

[Роман Ямчук]

Эта задача решается на css

div {
  border-radius: 10px 0 10px 10px}

Comments

[one_day]

и :hover добавить

[Александр]

Мне нужно сделать универсально. Если в первом пункте есть подменю, то скругление убирается, если нет, то остается. Я так думаю, что нужно в этого подпункта проверить детей? Если есть то убрать, если нет то оставить?

[Александр]

И еще такое же нужно сделать начиная с 3-го пункта с конца и вниз.

Answer 3

[Павел Корнилов]

Такие задачи нужно CSS решать.
Но если сильно нужно именно JS, то:
el.style.borderRadius=10px 0 0"";

Comments

[Александр]

Нужно что бы менялся динамически. То есть при наведении на первый пункт, скругление пропало, при наведении на второй и последующие оно появилось.

[Павел Корнилов]

Ну, значит поставить этот код в обработчик соответствующего события.

<div id="field2" style="border:2px solid red;">
	Блок
</div>

<script>
	var f1= document.getElementById('field2');
	f1.onmouseover= function(e) {
		this.style.borderRadius= "10px 0 0";
	}
	f1.onmouseout= function(e) {
		this.style.borderRadius= "10px 10px 0 0";
	}
</script>

[Александр]

KorniloFF: Спасибо)

[Павел Корнилов]

Александр: лучшее спасибо - отметить решением =)
А так, на здоровье, рад был помочь.