Menu
I'm looking for a method for my hovering issue.
<div class="section"> <div class="image"><img src="myImage.jpg" /></div> <div class="layer">Lorem Ipsum</div> </div> Now, both classes, image and layer, have borders. Both have different color for normal and hover. Is there way to make it, so if I hover layer class, both layer and image class hovering border color is active? And vise versa?
962
for example you have a link attached to another link and you want to show both at hovering at one you can do it simply by specifying each individual's functions then at once at hovering both.
If you have two elements in your HTML and you want to :hover over one and target a style change in the other the two elements must be directly related--parents, children or siblings. This means that the two elements either must be one inside the other or must both be contained within the same larger element.
The :hover selector is used to select elements when you mouse over them. Tip: The :hover selector can be used on all elements, not only on links. Tip: Use the :link selector to style links to unvisited pages, the :visited selector to style links to visited pages, and the :active selector to style the active link.
You don't need JavaScript for this.
Some CSS would do it. Here is an example:
<html> <style type="text/css"> .section { background:#ccc; } .layer { background:#ddd; } .section:hover img { border:2px solid #333; } .section:hover .layer { border:2px solid #F90; } </style> </head> <body> <div class="section"> <img src="myImage.jpg" /> <div class="layer">Lorem Ipsum</div> </div> </body> </html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
