Problematic Situation
The issue at hand revolves around the selector:
.action-log-button:hover .triange-left {...
which suggests a layout that does not exist:
<p class="action-log-button" id="login-menu-button">
Login <div class="triangle-left"></div>
</p>
In CSS, styles cascade in a flow, meaning if you wish to target one element but affect another unrelated element, make sure that the affected element is either nested within or follows the targeted element.
Upon inspecting the layout, it becomes apparent that hovering over .action-log-button can never impact .triangle-left due to the positioning of .action-log-button and .triangle. In essence, for .triangle-left to be affected, it needs to be inside or placed after .action-log-button.
Resolution Strategy
To rectify this situation, place the HTML of .action-log-button right before .triangle* and implement this rule:
.action-log-button:hover+.triangle .triangle-left {
border-right-color: #2e2e2e;
}
*Although having the triangle positioned after the button may not align with your preference, please continue reading for an explanation.
This leads to the following sequence of actions:
hover over .action-log-button
proceed to + .triangle immediately after
navigate inside .triangle to reach .triangle-left
and modify its border-right-color: #2e2e2e;.
Note the shift from
border-right: 40px solid #2e2e2e;
alongside updates in .triangle-left -- separating shorthand rulesets simplifies style complexity and reduces errors.
Finally, to address the position switch between the triangle and button, utilize the flexbox property: order By assigning numerical orders to flex-items (direct children of a flex-container), they will assume corresponding positions. Therefore, assign .action-log-button order: 3 and .triangle order: 2. While rendering on a webpage displays them correctly, the actual order remains true in the HTML structure.
Visual Presentation
Moreover, the HTML tags have been adjusted to semantically accurate types. Utilizing <p> or <div> as a button proves suboptimal. It is valid yet far from ideal.
.actions {
display: flex;
margin-top: 20px;
max-width: 260px;
}
.action-reg-button {
font-size: 13px;
font-weight: bold;
color: black;
padding: 10px 45px 10px;
transition: 0.2s;
order: 1
}
.action-log-button {
font-size: 13px;
font-weight: bold;
color: white;
padding: 10px 25px 10px;
background-color: #0D5E5E;
cursor: pointer;
transition: 0.2s;
order: 3
}
.triangle{
width: 40px;
margin-top: 12px;
order: 2
}
.triangle-left {
width: 0;
height: 0;
border-top: 40px solid transparent;
border-bottom: 0px solid transparent;
border-right-width: 40px;
border-right-style: solid;
border-right-color: #0D5E5E;
transition: 0.2s;
}
.action-reg-button:hover {
color: #b2b2b2;
cursor:pointer;
}
.action-log-button:hover+.triangle .triangle-left {
border-right-color: #2e2e2e;
}
button {
display: block;
}
.triangle-left{
margin-top:-10px;
}
<fieldset class="actions">
<button class="action-reg-button">Register</button>
<button class="action-log-button">Login</button>
<section class='triangle'>
<div class="triangle-left"></div>
</section>
</fieldset>