Mouse problems Hover in css

Asked

Viewed 182 times

0

all good? I have the following problem with mouse Hover, I started to see some html and css lessons and I am with a personal project, I made a simple code just to study mouse Hover but it doesn’t work properly, I tried display: None/block, visibility: Hidden, filter: opacity and nothing the mouse Hover does not work, being that it is from one class to another.

This is the code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>Document</title>
</head>
<body>
<div class="mapa"><a class="loja"></a></div>
<div class="descri">LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM 

IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM 

IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM 

IPSUM LOREM IPSUM </div>
</body>
</html>

<style type="text/css">


.mapa {
    width: 500px;
    height: 500px;
    background: green;
    float: left;
}

a.loja {
    width: 20px;
    height: 20px;
    background: black;
    position: absolute;
    border-radius: 100px;
    margin-top: 29px;
    margin-left: 53px;
    transition: 1s;
}

a.loja:hover {
    cursor: pointer;
    background: red;
}

a.loja:mouseover .descri{
    display: block;
}

.descri {
    width: 300px;
    height: 300px;
    float: left;
    background: black;
    color: white;
    text-align: justify;
    padding: 21px;
    font-size: 10px;
    display: none;
}

Would someone kindly tell me where I’m going wrong?

Grateful.

hover mouse

  • Good afternoon, there is no css mouseover. There is onmouseover but this is an HTML event and is used in the tag. Usually used to call a javascript function.

  • In CSS what exists is Hover, but on that there is already an answer below

1 answer

0


There is no mouseover in the CSS.

So the block below is wrong.

a.loja:mouseover .descri{
    display: block;
}

Try it like this, change it :mouseover for :Hover:

a.loja:hover .descri{
    display: block;
}

Also, you are putting your style in wrong location, the correct one would be in an external file, but as you are using in the same file you have to put your tag of style inside head.

Complete code:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Document</title>

    <style type="text/css">
        .mapa {
            width: 500px;
            height: 500px;
            background: green;
            float: left;
        }

        a.loja {
            width: 20px;
            height: 20px;
            background: black;
            position: absolute;
            border-radius: 100px;
            margin-top: 29px;
            margin-left: 53px;
            transition: 1s;
        }

        a.loja:hover {
            cursor: pointer;
            background: red;
        }

        .loja:hover .descri {
            display: block;
        }

        .descri {
            width: 300px;
            height: 300px;
            float: left;
            background: black;
            color: white;
            text-align: justify;
            padding: 21px;
            font-size: 10px;
            display: none;
        }
    </style>
</head>

<body>
    <div class="mapa">
        <a class="loja"><div class="descri">
        LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM </div></a>
    </div>

</body>

</html>

  • Oops, Ox my dear, the block where was mouseover was a test I was seeing on the internet, was using the :Hover even, and even using :Hover and putting the style inside the head, it still didn’t work.

  • I made an edition in the code, now it will work, sorry for the delay!!! Your div .descri needs to be inside a.loja.

  • Just to clarify me then, the structure that will appear has to be within the class that will be the :Hover, correct?

  • In this case yes, there are several ways to make a Hover effect, in different ways, it will depend on the creativity of each one.

Browser other questions tagged hover mouse

You are not signed in. Login or sign up in order to post.