Style not propagate for parents

Question

I have several elements inside each other and when I hover the mouse with the Hover it adds an edge to identify the element, however, as all have the same class, all items grab the edge.

I want only the element positioned with the mouse to reach the edge, this is possible?

Follow example of the problem:

.test
{
    width: 100%;
    float:left;
    padding-top: 20px;
    padding-left: 20px;
    padding-bottom: 20px;
}

.test:hover
{
    outline: #000 1px solid;
}

<div class="test">
    teste
    <br>
    <div class="test">
        teste2
        <br>
        <div class="test">
            teste3
            <br>
        </div>
    </div>
</div>

Answer 1

What you intend is not possible that way.

Partly because CSS works like this, note that the first letter of CSS means "Cascade", meaning rules are applied from relative to descendant; and partly because it’s doing it in a way that doesn’t help.

If you want to use this HTML you will have to do this with javascript. It would be best to use lists, which are made/designed for this type of code.

Example using Javascript:

$(function(){
    var testes = $('.test');
    testes.on('mouseover mouseout', function (event) {
        event.stopPropagation();
        testes.removeClass('ativo');
        $(event.target).addClass('ativo');
    });
});

.test {
    width: 100%;
    float:left;
    padding-top: 20px;
    padding-left: 20px;
    padding-bottom: 20px;
}
.ativo {
    outline: #000 1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="test">teste
    <br>
    <div class="test">teste2
        <br>
        <div class="test">teste3
            <br>
        </div>
    </div>
</div>