How to mouseover an image to trigger text hover states [SOLVED]

I have webpage with several images and hyperlinks applied to each image. Each image also has a text title above it and a text model number below it. I want to mouseover each image (on a desktop computer) and automatically have the associated title and model# text to change color (akin to a Hover state change). How do I accomplish that?

I know I can create a new Class and apply that Class to the image and title and model#, but mousing over the image doesn’t trigger the hover states of the text, so that isn’t a solution.

I also know I can create a new Class and apply that Class to the Column that contains my Image and two pieces of text, but that isn’t what I want either because a mouseover anywhere inside that container will trigger the text color change. I only want the text color change to occur when the arrow pointer is hovering above the image because only the image has a hyperlink.

Again, I want to mouseover the IMAGE and have the text above and below it change color (for as long as the arrow pointer is hovering above the associated image). The aim is for the text color change to be a visual indicator to desktop computer users that their arrow cursor is hovering over that particular image. (The text I am talking about is HTML text, not a graphic. And that text is NOT overlapping the image at all, but sits in a separate box above and below the image.)

Thank you.

The only solution I can suggest for that is using the + CSS selector.

You can use it to select elements outside the element in question. So you could have css apply to a P tag after an Img.

I use this very technique to apply content padding to a menu that scrolls to sticky to stop jumping.

Other options probably include making a script. CSS is probably the easiest.

I searched this forum for “+ CSS selector” and got no results. Sorry to trouble you, but what specifically are you referring to? (Where do I find what you are referring to in Blocs?)

Thanks.

Hey @JDW

CSS selectors.

For example the plus sign can be used
https://www.w3schools.com/cssref/sel_element_pluss.asp

There are lots of things you can do with the CSS

https://www.w3schools.com/cssref/css_selectors.asp

I have created an example file for you, the only code in the header is…

<style>
.myimage:hover + h2 {
color: red;	
}
</style>

image_hover_example.bloc (1.4 MB)

1 Like

ScreenRecording2019-12-24at11223

Nice work :call_me_hand:

Thank you for the example *.bloc document. I see that your suggestion is basically “add CSS to Page Settings > Add Code.” But I found 2 problems, only the first of which I am able to fix myself:

  1. I don’t want all H2’s on a given web page to turn red when mousing over a graphic. I want only specific text boxes to turn red. To accomplish that, I would need to add a custom Class name to each text box in the right sidebar (for example: “test”) and then change the CSS code to this (which I verified works):
    <style>
    .myimage:hover + .test {
    color: red;	
    }
    </style>
  1. But when I add a hyperlink to each graphic, both your code and my altered version of your code stops working entirely (no red text when mousing over the graphic). Please open your *.bloc and click on the leftmost graphic, then Right Sidebar > Interactions > Navigate to Page > Home, then Preview in Blocs. When your point hovers over that leftmost image, the text beneath no longer turns red. Do you know what is the solution to this problem?

Not problems. I gave you examples. But you at least see the way it works.

Regarding “problem 2”. If you read up the way the class selector works you will probably need to make adjustments to make it work. (See the links I left). The moment you add the interaction you’re adding <a> tags so it will effect the way it’s working.

It’s Christmas Day here in NZ. So I can’t provide you a more specific solution. :grin:

They won’t. Just like the project file I posted or the animated gif shows. Each one is contained.

Oh, yes, I know. But I’ve spent the last 2 hours in vain trying to get it to work. So the solution is still a mystery. :cry:

@Pealco, my friend, if you have any thoughts on what CSS code might work, I’d love to hear from you!

@JDW,

Since you were a little stuck, (probably my fault, it was Christmas Day after all) here is a working version for the image having <a> tags.

image_hover_example_2.bloc (1.4 MB)

The code in this example is…

<style>
a:hover + h2 {
color: red;	
}
</style>

As before the H2 is just an example, change it to what ever class you are using. For example as you mentioned before…

<style>
a:hover + .test {
color: red;	
}
</style>

Thats all you should need, and because the way the + selector works, it shouldn’t effect anything else on the page, just like in the example how only the related H2 is modified to red on hover.

@Malachiman
I never could get it to work on a Font Awesome icon, so I gave up until today. Today, I’ve spent an hour on it but still can’t get my code to work. In your example, you used an image. I am using a Font Awesome icon instead of an image. Basically what I want to happen is this:

  1. When I mouseover the text below the icon, I want that text (which is a link) to change to its Hover color and I want the icon to do the same.
  2. When I mouseover the icon, I want that icon (which is also a link) to change to its Hover color and I want the text beneath it to do the same.

Any ideas you might have would be appreciated. Thanks!

That is an interesting one. It probably is possible using complicated CSS. The tricky bit is the FA is in a span and the text is in a different div. I had a play and couldn’t quite get it to work. I could get one without the other. :thinking:

One option maybe to use data-attributes and use that in the CSS as a selector. You can even use href elements.

The other options would be to code them both in < a > tag wrapper. Which is probably what I would have done.

I have a ton of work commitments starting up for the next several days. So short of time to fully look into it sorry.

1 Like

I spent another 2 hours in vain on it this morning. I was about to give up again when I found the following web page with jQuery code:

I tried it in the Footer in Blocs, but it didn’t work, maybe because there’s a formatting problem with that jQuery code. :frowning:

Anyway, I just wanted to post this update here in hopes that someone more brilliant than I will come along and provide a solution. Actually, I am rather shocked that no Blocs users other than myself ever wanted both a Font Awesome icon and an associated text link to both change their hover state when either one is moused-over.

Hello @JDW regarding your request and the link you send there you have your need working:

LINK

If is this, there are the steps to replicate:

  1. Create a div container and add it a class: “hovered-set”

  2. Add inside that div a font awesome link and a H6 (this example) and transform the text from that text to a link with the last button when you select text: image

  3. then open page preferences and add the script:

document.addEventListener("DOMContentLoaded", function() {
    $( '.hovered-set' ).each(function() {	
      $(this).find('.fa,H6 a').hover(function() {
        $(this).parents('.hovered-set').addClass('hovered');
      }, function() {
        $(this).parents('.hovered-set').removeClass('hovered');
      })
    })
  })

In this script you have to add the classes or elements to change inside the div so in this case you have .fa (fontawasome class) and H6 a (link inside H6).

  1. You have to change all things to whatever you need on hover:
.hovered-set.hovered .fa:before,
	.hovered-set.hovered H6 a,
	.hovered-set.hovered H6 a:hover {
  		color: blue;
	}

so you have 2 items but with 3 conditions:

  • .fa:before (hover icon to afect icon)
  • H6 a (hover icon to affect text)
  • H6 a:hover (hover text to affect text)

So in the end you will have the following code:

<script>
document.addEventListener("DOMContentLoaded", function() {
    $( '.hovered-set' ).each(function() {	
      $(this).find('.fa,H6 a').hover(function() {
        $(this).parents('.hovered-set').addClass('hovered');
      }, function() {
        $(this).parents('.hovered-set').removeClass('hovered');
      })
    })
  })
  </script>
  
  <style>
	.hovered-set.hovered .fa:before,
	.hovered-set.hovered H6 a,
	.hovered-set.hovered H6 a:hover {
  		color: blue;
	}
  </style>

Hope it helps you…

2 Likes

Oh, my dear friend @Pealco! Once again, you have been an excellent help! Thank you!

I used H3 instead of H6 and used Red instead of Blue, as follows…

Left sidebar:
image

DIV on page containing FA icon with link and text with link:
image

Perfect! Thanks!

2 Likes

@Pealco

I marked this thread SOLVED yesterday, but after I made a change today, something broke. Today, I wanted to control the size of my icons. To accomplish that, I put each of my icons inside a DIV and applied a new class to each DIV. (The reason the icon must be placed inside a DIV is because the DIV is required for “inherit” to work properly.) I then clicked the infinity icon in the right sidebar, which is required for the new class I created to have an effect:

image

The problem is, when I click that infinity icon, your code breaks and the icon becomes a blue color by default. I’ve spent the past hour trying various modifications to your code to solve this, but I haven’t been able to find a solution.

Again, when the icon size is set to a fixed size in the right sidebar the default icon color returns to normal but my font sizing class no longer works. To get my new class to affect the size of the icon, I must set the icon to “infinity” in the right sidebar, but that breaks your code.

How do I fix your code?

Send me the code for the the new class please, as I do what you describe and everything is working.
Tell me what is your new class (name) and where are you applying it, if in class manager or in page preferences with code. And the class is to the DIV or to the Icon.

Here’s a single page document:

https://kiramek.com/21test95/PealcoTest.zip

Sorry for the large size, but Blocs refuses to eliminate unused graphics after I delete pages!

When you open the document, scroll down and click on the tab that has your name. All icons in blue are the problem icons. All other icons work perfectly with your code. Like I said, selecting an icon and then clicking Infinity in the right sidebar breaks your code. The top row of 4 icons and the bottom-right icon look fine only because I have the icon size FIXED in the right sidebar. The blue icons have INFINITY size. And like I said, I must use INFINITY size in order for my font-size adjustment class to affect the icon size. (My class won’t work if the size of an icon is FIXED.)

UPDATE: @Pealco Never mind. I found the solution! I added a new class to each of the icons (blue above) and that fixed the problem. (Before, I didn’t need to use a class on the icons, but when using INFINITY size, it is needed.) Sorry for the bother!

1 Like