Делаю слайдер аналогично этому
https://ruseller.com/lessons.php?rub=2&id=1082
и все работало как надо.
Но понадобилось изменить верстку (свойство position). (К сожалению, так было нужно.)
В результате кнопка со стрелкой (див) не смещается вместе с основным дивом (который появляется при наведении на эту кнопку).
Как сделать так, чтобы смещались и див и кнопка рядом, как будто она прикреплена к краю дива?
Мой код
https://jsfiddle.net/vb88mfzy/1/
---------------------------------------
Мой код (правила обязывают выкладывать и тут)
html
<div id="GRAPH1_container"></div><div class="GRAPH1_graph_menu_slider">
<div class="graph_menu_slider">
<div class="arrow_menu_button_1"><div class="arrow_right_menu_button_1_in"></div></div>
<div class="graph_menu_slider_inner">
<div class="graph_menu_content ui_panel_1">
1111
</div>
</div>
</div>
</div></div></div>
css
.graph_menu_slider {
z-index:2;
position: absolute; /*Вот что пришлось изменить*/
top: 50%;
left: 0;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.graph_menu_slider_inner {
position: absolute; /*Вот что пришлось изменить*/
left: -424px;
margin-top:-18vh;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.graph_menu_slider:hover {
left: 0px;
}
.graph_menu_slider:hover .graph_menu_slider_inner {
left: 0px;
}
.graph_menu_content
{
width:400px;
height:20vh;
border: 2px solid #F0F0F0 !important;
}
/* Ниже оформление*/
.ui_panel_1
{
padding: 10px;
background: #222A37;
border: 1px solid #383838;
color:#CDCFD2;
font-family: Arial;
font-size: .875rem;
vertical-align: middle;
}
.arrow_right_menu_button_1_in {
background: #0C7ECB;
width:1.8rem;
height:1.9rem;
content:'';
clip-path: polygon(0 34%, 50% 80%, 100% 34%, 80% 34%, 50% 60%, 20% 34%);
transform: rotate(-90deg);
}
.arrow_menu_button_1{
border: 0.0625rem solid #00AEFF; /* 1px */
background: #171B23;
cursor:pointer;
width:2.0rem;
padding: 0.4rem;
text-decoration: none;
transition-property: background;
transition-duration: 100ms;
transition-timing-function: ease;
transition-delay: 0s;
vertical-align: middle;
}
.arrow_menu_button_1:hover {
border: 0.0625rem solid #00AEFF; /* 1px */
background: #0E1015;
}