Style does not propagate to parents

Question

Style does not propagate to parents

Navigation

#1 by (4 votes)

2

I have several elements inside one another and when I hover the mouse, it adds a border to the element's identification, however, as everyone has the same class, all items take the border.

I want only the element positioned with the mouse to get the border, is it possible?

Here is an 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>

html css

asked by anonymous 14.10.2014 / 00:45

1 answer

f: param sends id null and java.lang.NumberFormatException is thrown Print highlighted matrix-specific values

score 4 · Answer 1

What you intend is not possible in this way.

In part because CSS works like this, note that the first letter of CSS means "Cascade", ie the rules are applied from parent to descendant; and partly because it is doing so that does not 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 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><divclass="test">teste
    <br>
    <div class="test">teste2
        <br>
        <div class="test">teste3
            <br>
        </div>
    </div>
</div>