define hover style from id or class

Question

if i have something like

<a id="link-id">...</a>

or

<a class="link-class">...</a>

how can I setup the hover behavior using link-id or link-class? I've tried link-id:hover and link-class:hover but it does not work.

Answer 1

Use a hover pseudo-class like this:

#link-id{
    height:300px;
    width:300px;
    font-size:20px;
    background:red;
    display:block;
    transition:0.5s ease;
}

#link-id:hover{    /*or .link-class if targeting by class*/
    font-size:30px;
    background:blue;
    cursor:poitner;
    text-align:center;
}

Demo

Answer 2

Make sure you write # before id of element, and . before class name. For example:

.link-class:hover {}

#link-id:hover {}