How To Keep the Arrow Pointing Up When the Dropdown Is Visible? - html

Question

I need help. I have a main button that has an arrow pointing down to indicate that there is a dropdown. Upon hover, the dropdown appears and the arrow rotates and pointing up. However, it should keep pointing up when I hover over the dropdown items. Could anyone help me with my codes? Thank you in advance.
Please see the link for codes on CodePen.
https://codepen.io/denzdoneza/pen/ZEjddQp
HTML:
<a href="#" class="mainButton">
<button>Resources<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 24 14.1" style="enable-background:new 0 0 24 14.1;" xml:space="preserve">
<path d="M12,14.1L0,2.1L2.1,0L12,9.9L21.8,0L24,2.2L12,14.1z"/>
</svg></button>
</a>
<div class="dropdown">
<button>Blackpaper</button>
<button>Whitepaper</button>
</div>
CSS:
button {
width: 256px;
height: 52px;
font-size: 16px;
background-color: #cd0d0d;
color: #ffffff;
}
a button svg {
fill: #ffffff;
position: absolute;
width: 12px;
margin: 6px 0 0 8px;
transform: rotate(0deg) translateX(0px) translateY(0px);
transition: transform 0.2s linear;
}
.dropdown {
display: none;
}
button:hover {
background-color: #8e0000;
}
a.mainButton:hover ~ .dropdown {
display: flex;
flex-direction: column;
}
a.mainButton:hover svg {
transform: rotate(180deg) translateX(0px) translateY(0px);
transition: transform 0.2s linear;
}
.dropdown:hover {
display: flex;
flex-direction: column;
}
.dropdown:hover ~ a.mainButton button svg {
transform: rotate(180deg) translateX(0px) translateY(0px) !important;
transition: transform 0.2s linear;
}
I tried a CSS :hover on the container of the dropdown and use ~ to point on the arrow but it didn't work.
CSS:
.dropdown:hover ~ a.mainButton button svg {
transform: rotate(180deg) translateX(0px) translateY(0px) !important;
transition: transform 0.2s linear;
}

Answer 1

You could just put all the code inside a container and then change:
a.mainButton:hover svg {
transform: rotate(180deg) translateX(0px) translateY(0px);
transition: transform 0.2s linear;
}
For:
.container:hover svg {
transform: rotate(180deg) translateX(0px) translateY(0px);
transition: transform 0.2s linear;
}
button {
width: 256px;
height: 52px;
font-size: 16px;
background-color: #cd0d0d;
color: #ffffff;
}
a button svg {
fill: #ffffff;
position: absolute;
width: 12px;
margin: 6px 0 0 8px;
transform: rotate(0deg) translateX(0px) translateY(0px);
transition: transform 0.2s linear;
}
.dropdown {
display: none;
}
a.mainButton:hover ~ .dropdown {
display: flex;
flex-direction: column;
}
.container:hover svg {
transform: rotate(180deg) translateX(0px) translateY(0px);
transition: transform 0.2s linear;
}
.dropdown:hover {
display: flex;
flex-direction: column;
}
.dropdown a:hover ~ a.mainButton button svg {
transform: rotate(180deg) translateX(0px) translateY(0px) !important;
transition: transform 0.2s linear;
}
<div class="container">
<a href="#" class="mainButton">
<button>Resources<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 24 14.1" style="enable-background:new 0 0 24 14.1;" xml:space="preserve">
<path d="M12,14.1L0,2.1L2.1,0L12,9.9L21.8,0L24,2.2L12,14.1z"/>
</svg></button>
</a>
<div class="dropdown">
<button>Blackpaper</button>
<button>Whitepaper</button>
</div>
</div>

Answer 2

You need to add the CSS rule "pointer-events: none" under the display: none; line
.dropdown {
display: none;
pointer-events: none;
}