Is it possible to assign a function to several css rules in the same hover, but with different values?

Question

Is it possible to assign a function to several css rules in the same hover, but with different values?

Navigation

#1 by (2 votes)

0

Can you make a transition in css, 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

asked by anonymous 01.07.2014 / 07:54

1 answer

Retrieve data from a List View Positioning controls with bootstrap not aligning

score 2 · Accepted Answer

Assuming your #skills should be #secs , and knowing that you can not have duplicate ID's (so I've switched to class="secs" ) then you just have to fix:

.co-la > .html

for

.co-la.html

In this line and in others that 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 that behaves like this: link