Utilizing primarily CSS, along with background images and adjacent selectors, I am creating a page that displays unique human-readable text information when the user hovers over horizontally stacked images. The textual information is presented in a div on the left side of the page with the class name "default-text", while the images are on the right side of the page, each uniquely classed with sequentially suffixed classnames such as .hover1, .hover2, through .hover7.
The current functionality works when hovering over the images, but I would like to implement a "sticky" hover state where both the image and accompanying text remain in a hover state even after the cursor moves off them. This state should persist until the cursor hovers over another image or until a specified period of time elapses, let's say 10 seconds.
For example; here's two rows of HTML for the images:
<div class="hover1"></div>
<div class="hover1text hovertext">
<h3>Best-in-Class BBQ</h3>
<p>tons of text</p>
<p>Lots more awesome text</p>
</div>
<div class="hover2"></div>
<div class="hover2text hovertext">
<h3>Penetration and Vulnerability Tenderloin</h3>
<p>More awesome text</p>
<p>What you wanted</p>
</div>
etc for the balance of the 7 items
A portion from my CSS:
.context-services .region-inner .field-name-body .float-right .hover1 {
background-image: url(https://dl.dropboxusercontent.com/u/67315586/buttons/1_off.png);
transition: 0s background;
}
.context-services .region-inner .field-name-body .float-right .hover1:hover {
background-image: url(https://dl.dropboxusercontent.com/u/67315586/buttons/1_hover.png);
transition: 0s background;
}
.context-services .region-inner .field-name-body .float-right .hover1 + .hover1text {
opacity: 0;
transition: 0s all;
}
.context-services .region-inner .field-name-body .float-right .hover1:hover + .hover1text {
opacity: 1;
transition: 0s all;
}
You can view my code on jsfiddle.net here.
I welcome any insights or suggestions. Thank you!