disable hover effect in some "icon box"

Tagged: 

  • disable hover effect in some "icon box"
    Viewing 12 posts - 1 through 12 (of 12 total)

  • yaya
    Participant
    #7508

    Hi, first thank for your support so far.

    I used the “icon box” element also as a graphic element without any link connecting to it. Is there a way to DISABLE the hover effect in such case, thus it will not be misleading (i.e., disable the link “sign” when there is no link)? Alternatively, is there a way I can control the icon color on hover (thus to manipulate the hover effect to be redundant)?
    As I can not provide you with access to our website I would appreciate receiving your instructions to implement the changes myself. Thanks!


    Omar
    Keymaster
    #7533

    Hey Yaya,

    Sorry for the late response.
    Yes you can, using Custom CSS, I am not sure I understand the request very well, so please correct me if I am wrong, and provide the website link (no admin required here)

    Please add the following to your Custom CSS panel at Theme Options >> General >> Advanced >> Custom CSS
    ul.featuresHome.offer:hover {
    cursor: default;
    }
    ul.featuresHome.offer:hover .offerImage{
    color: #D32424;
    }

    Cheers


    yaya
    Participant
    #7652
    This reply has been marked as private.

    Omar
    Keymaster
    #7653

    Hey yaya,

    Thanks, that did clarify a lot.
    So for that effect (no hover effect) you’ll need to set an ID for the column that is holding the icon box block
    for example ‘no-hover-feature’

    then add the following CSS to Theme Options > General > Advanced > Custom CSS

    #no-hover-feature .featuresHome .image_title_wrap:hover span, #no-hover-feature .featuresHome .image_title_wrap:hover .featureHomeTitle{
    color: rgb(140, 197, 65) !important;
    }

    Cheers


    yaya
    Participant
    #7654
    This reply has been marked as private.

    Omar
    Keymaster
    #7655

    Hey Yaya,

    You’re welcome 🙂

    I missed that one, please edit the code to be
    #nohoverra7 .featuresHome .image_title_wrap:hover span, #aq-block-17 .featuresHome .image_title_wrap:hover .featureHomeTitle{
    color: rgb(236, 187, 69) !important;
    }

    cheers


    yaya
    Participant
    #7656
    This reply has been marked as private.

    Omar
    Keymaster
    #7659

    Hey yaya,

    I am so sorry! I copied the wrong code again!!
    #nohoverra7 .featuresHome .image_title_wrap:hover span, #nohoverra7 .featuresHome .image_title_wrap:hover .featureHomeTitle{
    color: rgb(236, 187, 69) !important;
    }

    It’s the #aq-block-17 that’s wrong, it should be #nohoverra7

    Sorry again!


    yaya
    Participant
    #7662
    This reply has been marked as private.

    yaya
    Participant
    #7664
    This reply has been marked as private.

    Omar
    Keymaster
    #7681

    Hey Yaya,

    Please try this code for that section

    #qaiconlist .featuresHome .image_title_wrap:hover .featureHomeImage{
    background: rgb(163, 163, 163);
    -moz-transition: none !important;
    -webkit-transition: none !important;
    -o-transition: color 0 ease-in !important;
    transition: none !important;
    }
    #qaiconlist .featuresHome .image_title_wrap:hover .featureHomeImage span{
    color: #fff !important;
    }
    #qaiconlist .featuresHome.gridStyle .featureHomeImage:after{
    -moz-transition: none !important;
    -webkit-transition: none !important;
    -o-transition: color 0 ease-in !important;
    transition: none !important;
    }

    Let me know if there is anything else we can help with

    Cheers


    yaya
    Participant
    #7699
    This reply has been marked as private.
Viewing 12 posts - 1 through 12 (of 12 total)

The topic ‘disable hover effect in some "icon box"’ is closed to new replies.