Looking to style an anchor element that contains other HTML elements. Here is the basic code structure:
HTML:
<div class="container" id="sub-menu">
<div class="row" data-bind="foreach: subMenu">
<a href="#">
<div class="col-md-3 col-sm-6">
<h3><span>title</span></h3>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim</div>
</div>
</a>
</div>
</div>
The Bootstrap classes are not causing any issues :)
Below is the CSS (compiled from LESS):
#sub-menu {
margin-top: 10px;
}
#sub-menu a span {
color: black;
}
#sub-menu a div {
color: #6b6b6b;
}
#sub-menu a:hover {
color: red !important;
text-decoration: none;
}
The desired outcome is to change the text color to red when the user hovers over the anchor element. The current solution doesn't apply the red color but does work for the text decoration. Check out the updated version.
Setting the color on the 'a' level works well (example here) or not setting the color at all (sample link), but different colors need to be set for the title and body.
I also attempted to add hover styles for each element separately (demo here). However, it's not ideal as the decoration works for all elements, but the color changes only when hovering over the specific area.
The goal is to achieve similar functionality to the second version, but with custom colors like in the first version.
Appreciate any assistance provided.
EDIT: Forgot to mention that an icon will also be included in the h3 tag, hence why the title is within a span tag.