Can you assign a function to several css rules in the same Hover, but with different values?

Asked

Viewed 211 times

0

Can you do a css Transition, all triggered by the same element, but with different values? CSS:

.co-la {
    background: none repeat scroll 0 0 green;
    height: 25px;
    left: -37px;
    margin: 0;
    width: 0%;
}
    #skills:hover .co-la > .html{width:87%; }
    #skills:hover .co-la > .css{width: 80%}
    #skills:hover .co-la{transition:width 1s;}

HTML:

<div id="secs">
        <div class="co-be"><div class="co-la html"></div><h4>HTML 5</h4></div>
        <p>87%</p>
    </div>
    <div id="secs">
        <div class="co-be"><div class="co-la css"></div><h4>CSS 3</h4></div>
        <p>80%</p>
    </div>
html css
  • 1

    Hmm... I don’t quite understand what you want. Where is the skillsin your HTML? You have duplicated Ids, this gives invalid HTML. Can explain better, perhaps by giving an example of the functionality you want?

  • I get it.. I’ll see if I can get something, because I need something similar too.

  • The answer below is what I was looking for?

1 answer

2


Assuming that your #skills should be #secs, and knowing you can’t have duplicate Ids (so I switched to class="secs") then you just have to fix:

.co-la > .html

for

.co-la.html

On that line and on the others who have the same reasoning. So for this HTML:

<div class="secs">
    <div class="co-be">
        <div class="co-la html"></div>
         <h4>HTML 5</h4>
    </div>
    <p>87%</p>
</div>
<div class="secs">
    <div class="co-be">
        <div class="co-la css"></div>
         <h4>CSS 3</h4>
    </div>
    <p>50%</p>
</div>

will have this CSS:

.secs:hover .co-la.html {
    width:87%;
}
.secs:hover .co-la.css {
    width: 50%;
}
.secs:hover .co-la {
    transition:width 1s;
}

and behaves like this: http://jsfiddle.net/js8hd/

  • 1

    +1 for the answer. I voted to close the question because the "detail" you mentioned is not clear.

Browser other questions tagged html css

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