[Support request] How to underline the text (link) on mouseover as in example.

[Elvin]

sorry if I always post the photos but at least I hope to be of help to others.

That’s fine. We actually appreciate efforts like this because the forum also serves as a knowledgebase for everyone. 🙂

Glad you got it sorted. Let us know if you need further help. 😀

[francesco]

sorry if i disturb you but i realized related news doesn’t work very well. in the sense that I would like the title underline to also appear when the mouse cursor is moved to the top of the image, not just if it is moved over the title.

https://fehu.it/earl-grey-3/

[Elvin]

We may have to modify the selectors further as we’ll have to use .wp-show-posts-inner so the underline appears when we hover on the actual post item.

Example selector.

.wp-show-posts-inner:hover h2.wp-show-posts-entry-title a{
    text-decoration: underline;
}

Or this one if it has to be just the image hover.

.wp-show-posts-image:hover + header.wp-show-posts-entry-header h2.wp-show-posts-entry-title a{
    text-decoration: underline;
}

[francesco]

Hi elvin, is there a way to block underlining in tablets and mobiles?

[David]

Hi there,

if you want to limit the styles to particular device size then you enclose your CSS in an @media query:

@media(min-width: 769px){

     /* Add your CSS in here for desktop sizes */

}

[francesco]

Hi David, correct? Or do I have to change the spaces in the code?

[David]

Spacing doesn’t matter but it does make it easier to read so i would lay it out like so:

@media(min-width: 769px){

     selector {
         property: value;
     }

     another-selector {
         property: value;
     }

}

make sure you close the @media query with its own }

[francesco]

Sorry but i can’t understand, selector, property, value. Come I imposed it? can you give me a demonstration with my code?

@media(min-width: 1023px){.paging-navigation p a:hover,
h2.wp-show-posts-entry-title a:hover,
div#rpwwt-recent-posts-widget-with-thumbnails-2 ul li a:hover,
.generate-columns-container article.post:hover h2 {
 text-decoration: underline;
}

[David]

Like so:

@media(min-width: 1023px) {

    .paging-navigation p a:hover,
    h2.wp-show-posts-entry-title a:hover,
    div#rpwwt-recent-posts-widget-with-thumbnails-2 ul li a:hover,
    .generate-columns-container article.post:hover h2 {
        text-decoration: underline;
    }

}

[francesco]

thnx David, Can the 1023px setting prevent iPads and phones from displaying the effect? or is there a fairer measure?

[David]

you can change this line:

@media(min-width: 1023px) {

to

@media(min-width: 769px) and (pointer: fine) {

the (pointer: fine) means it will only apply to devices that are using a device such as a mouse for the user interface. If not mouse or other fine pointing device is detected then it won’t apply.

[francesco]

Summing up this is the final result. thnx David

@media(min-width: 769px) and (pointer: fine) {

    .paging-navigation p a:hover,
    h2.wp-show-posts-entry-title a:hover,
    div#rpwwt-recent-posts-widget-with-thumbnails-2 ul li a:hover,
    .generate-columns-container article.post:hover h2 {
        text-decoration: underline;
    }

}

[David]

Thats great 🙂

[Author]

Posts