Bricks icon box hover bug

Bugs
1

Bricks Version: 1.5

I made an icon box widget hover “effect” but not working good.

In hover state i made a transform (working good)
Change background (working good)
Change icon and text color (it is only work if i move mouse pointer exactly to the icon or text)

It seems to be, like a hover effect in a hover effect. :smiley:

I think it would be working good, when i go to with mouse pointer into the icon box widget, the hover effect working together.

image
image
image

image
image510×916 98.4 KB

2

No bug. You need to set the hover-effect on the parent div and target the icon ibside like this:

.parent-div:hover .your-icon-class {
color: #xxxxxx;
}

Adjust classes, CSS argument and color to your needs.

3

Yes, i know this CSS custom code feature, but i think its very overcomplicated in this case. Why? Because it an default icon box widget with icon, text, link ect options.

If i want to make a really custom “icon box widget” I make a div or bloc and drop in separately an icon, an header and an text box. After i know, i have to make the hover effect with custom css solutions.

4

Sorry … I misunderstood and thought you were talking about a custom icon „box“ …

In this case … I agree!

5

Hi @simplecreative ,
Thanks a lot for your report!

The only option we can currently offer is custom CSS, as Michael has already suggested. In the future, we will make it possible to address every (inner) element. But unfortunately, this is not possible at the moment.

root:hover .content {
color: red;
}

root:hover .icon {
background-color: green;
color: blue;
}

Best regards,
timmse

1 Like
6

Thanks your support and work. I have some css knowlage, so i can make it.
My problem was only, why i have to use custom css for it, because it is a “all in” widget, with icon, title and text, and not a full custom block with uniqe icon widget, unique title and tex widgets. :slight_smile:

Because i make this to one of my customer, where i can, i dont want to use custom codes. So i made it with extra block wrappers, but it is not the best solutions for larger DOMs… :slight_smile:

7

And the button widget with icons hover problem is same… :wink:

8

Hey,
yes, of course, the problem occurs there as well, if you use an SVG that has to be addressed directly (unlike the font or background color which can be addressed on the root element).

As I said, we are aware of the problem.

1 Like