How Can I Apply A:hover To A Simple Html Block?

Developers Frontend
1

Hi,



I have a simple HTML block that contains a couple of links to other pages, e.g. link

I now want to apply a simple hover style:



a:hover {color:red}




This is correctly applied to all the rest of the site apart from that one html block.



What am I doing wrong?



Thanks

2

To target all href elements inside all HTML blocks, use:-


.wysiwyg-content a:hover {
color: red;
}


This will likely have undesired effects. I would therefore suggest, in your HTML Block setting, to set a value for 'User-defined custom CSS' and use this value to directly alter the appearance of href elements only within this block. For example, you can use a value of user-defined value of “mycustomblock” and the corresponding CSS would be:-


.mycustomblock > .wysiwyg-content a:hover {
color: red;
}

3

Hi, thanks for your reply.



I understand your thinking - better to define a class so that it only applies to the particular block.The trouble is that when I used “mycustomblock” in the user-defined CSS field it had no effect.



In fact even the blanket CSS



.wysiwyg-content a:hover {
color: red;
}




did not have any effect on that block (I cleared the cache).



All of my other CSS changes flow correctly; I must be missing something really basic?



Thanks.

4

When you say you cleared the cache, I'm hoping you did &cc and then also cleared your browser cache.

You could force the above &cc by manually removing var/cache/misc directory and it's sub-directories. If the permissions are bad on your site, you might not be removing that directory with the &cc.

5

Hi, yes I did &cc and deleted var/cache/misc and browser cache.



For the record, this works:



a:hover {
color: red;
}




but this does not:



.wysiwyg-content a:hover {
color: red;
}




thank you.

6

Hi, are you able to provide some help with this?



Thank you

7

I thought I was helping…

8

Thanks, just so I'm 100% sure I'm not making any silly mistakes, this is the correct code?



.wysiwyg-content a:hover {
color: red;
}

9

Yes, that is correct, assuming the HTML source code generated is similar to this:-


```php


test

```

The 'a' element is a child of the 'wysiwyg-content' element.
10

Hi and thanks for your reply.



I really must be missing something basic.

This is the HTML generated:


```php





Text





```

The block uses "mainbox-general" but I'm at a loss to explain why it doesn't work...
11

That's why it doesn't work. 'a' is a child of 'span', not a direct child of 'wysiwyg-content' class.



.wysiwyg-content span {
font-family: tahoma,arial,helvetica,sans-serif;
}




Using your exact HTML code, I have used:-



.wysiwyg-content a:hover {
color: FF0000;
}




This works no problem.



If you still have problems, set a class for the 'href' element and style it as appropriate, ie:-



class=“banana”


.banana a:hover {
color: red;
}

12

Thanks for clarifying the child error.

I have added this to my CSS file and cleared the cache:



.wysiwyg-content a:hover {
color: FF000;
}




but even after correcting the child element nothing happens:


```php



www.test.com


```

I also tried defining the CSS class ("banana") per your example.
I tried manually assigning the class to "wysiwyg-content" but again nothing:

```php


www.test.com


```



If I use the "mainbox-container" wrapper then I get this:

```php



Test








```

And if I remove the wrapper altogether, then:

```php



```

which does not work.

I am sure I am doing something very basic wrong...