How do I make CSS attribute for my SVG work?-CodePudding

I am trying to apply CSS code to two of my SVG icons. In my code, I noticed that <g> has already opacity: 0.5. What I want to do is that I wish to change this opacity to 1 when my mouse is over SVG icons.

I tried this in my css sheet, but it didn't work :

div.profile_photo > div.change-photo-icon > svg g:hover {
    opacity: 1 !important;
}

div.profile_photo > div.change-photo-icon > svg g:hover {
    opacity: 1 !important;
}

<div >
    <div >
        <div >
            <div >
                <div >
                    {{ form(form)}}
                    <svg width="20" height="15" viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <g opacity="0.5">
                            <path d="M5.39493 6.49977C5.39493 6.34784 5.27816 6.22468 5.13405 6.22468H5.13392H3.54268C3.61579 5.16491 4.10629 4.09044 4.91359 3.23888C5.79082 2.31357 6.91744 1.7829 8.00459 1.7829C8.68698 1.7829 9.35319 1.95838 9.93123 2.29041C9.97027 2.31283 10.0132 2.32394 10.056 2.32394C10.1078 2.32394 10.1594 2.30771 10.2038 2.27561L11.2749 1.50016C11.3471 1.4479 11.3896 1.36094 11.388 1.26862C11.3865 1.17633 11.3412 1.09097 11.2674 1.04137C10.291 0.385673 9.16302 0.0390625 8.00532 0.0390625H8.00459C7.1778 0.0390625 6.37569 0.209837 5.62053 0.546599C4.89112 0.871862 4.23616 1.3375 3.67382 1.93059C3.11141 2.52374 2.66986 3.21462 2.36141 3.98404C2.07567 4.69682 1.91593 5.44926 1.88545 6.22468H0.279257C0.176606 6.22468 0.0835054 6.28814 0.0413388 6.38679C-0.00082783 6.48546 0.0158196 6.60103 0.0838445 6.68207L2.6791 9.77397C2.7287 9.83306 2.79991 9.86676 2.87448 9.86676C2.87743 9.86676 2.88041 9.8667 2.88336 9.86659C2.96114 9.86379 3.03371 9.82456 3.0812 9.75953L5.33776 6.67148C5.37356 6.62444 5.39493 6.56474 5.39493 6.49977Z" fill="black" />
                            <path d="M15.9272 6.31698L13.3303 3.22506C13.2807 3.16599 13.2095 3.13232 13.1349 3.13232C13.132 3.13232 13.129 3.13238 13.126 3.13249C13.0482 3.1353 12.9757 3.17455 12.9282 3.23953L10.6688 6.33145C10.6081 6.4145 10.5975 6.52671 10.6414 6.62076C10.6853 6.71484 10.7761 6.77443 10.8755 6.77443H12.4685C12.3953 7.8342 11.9048 8.90867 11.0975 9.7602C10.2202 10.6855 9.09349 11.2162 8.00621 11.2162C7.32403 11.2162 6.65795 11.0407 6.07988 10.7087C6.04084 10.6863 5.99789 10.6752 5.95508 10.6752C5.90333 10.6752 5.8518 10.6914 5.80749 10.7234L4.73472 11.4989C4.66247 11.5511 4.61991 11.6381 4.62137 11.7304C4.62286 11.8227 4.66819 11.9081 4.74208 11.9577C5.71844 12.6135 6.84642 12.96 8.00412 12.96C8.83135 12.96 9.63354 12.7893 10.3888 12.4525C11.1182 12.1273 11.7732 11.6616 12.3356 11.0685C12.898 10.4754 13.3396 9.78449 13.648 9.0151C13.9338 8.30232 14.0935 7.54984 14.124 6.77446H15.7319C15.8345 6.77446 15.9276 6.71099 15.9698 6.61229C16.0119 6.51359 15.9953 6.39803 15.9272 6.31698Z" fill="black" />
                        </g>
                    </svg>
                </div>
                <a href="{{ path('delete_photo') }}" onclick="return confirm('Es-tu sûr(e) de vouloir supprimer ta photo ?')" >
                    <svg width="12" height="16" viewBox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <g opacity="0.5">
                            <path d="M10.2124 2.9388L9.8122 14.3652C9.80541 14.5613 9.64206 14.7274 9.45599 14.7274H2.54403C2.35812 14.7274 2.19461 14.5606 2.18786 14.3652L1.78769 2.9388C1.77669 2.62352 1.52613 2.37744 1.22809 2.38907C0.930049 2.40086 0.697425 2.66575 0.708379 2.98103L1.1084 14.4075C1.13687 15.217 1.77708 15.8698 2.54403 15.8698H9.45599C10.2226 15.8698 10.8631 15.2181 10.8916 14.4075L11.2916 2.98103C11.3026 2.66575 11.07 2.40086 10.7719 2.38907C10.4739 2.37744 10.2233 2.62352 10.2124 2.9388Z" fill="black"/>
                            <path d="M5.56787 5.245V13.0139C5.56787 13.2663 5.76119 13.4708 5.99983 13.4708C6.23847 13.4708 6.43176 13.2663 6.43176 13.0139V5.245C6.43176 4.99251 6.23847 4.78809 5.99983 4.78809C5.76119 4.78809 5.56787 4.99255 5.56787 5.245Z" fill="black"/>
                            <path d="M3.19208 5.25842L3.40816 13.0273C3.41526 13.2796 3.61413 13.4782 3.85258 13.4707C4.0911 13.4633 4.27883 13.2528 4.27173 13.0005L4.05566 5.2317C4.04871 4.97937 3.84969 4.78075 3.6112 4.78829C3.37271 4.7956 3.18514 5.00614 3.19208 5.25842Z" fill="black"/>
                            <path d="M7.94426 5.23121L7.72822 13C7.72112 13.2523 7.90885 13.4629 8.14734 13.4702C8.38586 13.4777 8.58474 13.2791 8.5918 13.0268L8.80787 5.25793C8.81482 5.00561 8.62721 4.79506 8.38872 4.7878C8.15023 4.78033 7.9512 4.97892 7.94426 5.23121Z" fill="black"/>
                            <path d="M0.600059 3.18838H11.4001C11.6982 3.18838 11.9401 2.93271 11.9401 2.61714C11.9401 2.30173 11.6982 2.0459 11.4001 2.0459H0.600059C0.301901 2.0459 0.0600586 2.30173 0.0600586 2.61714C0.0600586 2.93275 0.301901 3.18838 0.600059 3.18838Z" fill="black"/>
                            <path d="M4.35922 2.43164L4.58402 1.59902C4.63223 1.42083 4.8507 1.24644 5.02624 1.24644H6.97379C7.14932 1.24644 7.36779 1.42067 7.41601 1.59902L7.6408 2.43164L8.67922 2.11766L8.45443 1.28521C8.2736 0.616243 7.63147 0.104004 6.97379 0.104004H5.02624C4.36855 0.104004 3.72626 0.616487 3.5456 1.28521L3.3208 2.11766L4.35922 2.43164Z" fill="black"/>
                        </g>
                    </svg>
                </a>
            </div>
        </div>
    </div>
</div>

CodePudding user response：

The > selector works only for direct children, since change-photo-icon is not a "son" of profile_photo but a descendant, > won't work. You can use the space selector for descendants instead :

div.profile_photo div.change-photo-icon > svg g:hover {
    opacity: 1 !important;
}

<div >
    <div >
        <div >
            <div >
                <div >
                    {{ form(form)}}
                    <svg width="20" height="15" viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <g opacity="0.5">
                            <path d="M5.39493 6.49977C5.39493 6.34784 5.27816 6.22468 5.13405 6.22468H5.13392H3.54268C3.61579 5.16491 4.10629 4.09044 4.91359 3.23888C5.79082 2.31357 6.91744 1.7829 8.00459 1.7829C8.68698 1.7829 9.35319 1.95838 9.93123 2.29041C9.97027 2.31283 10.0132 2.32394 10.056 2.32394C10.1078 2.32394 10.1594 2.30771 10.2038 2.27561L11.2749 1.50016C11.3471 1.4479 11.3896 1.36094 11.388 1.26862C11.3865 1.17633 11.3412 1.09097 11.2674 1.04137C10.291 0.385673 9.16302 0.0390625 8.00532 0.0390625H8.00459C7.1778 0.0390625 6.37569 0.209837 5.62053 0.546599C4.89112 0.871862 4.23616 1.3375 3.67382 1.93059C3.11141 2.52374 2.66986 3.21462 2.36141 3.98404C2.07567 4.69682 1.91593 5.44926 1.88545 6.22468H0.279257C0.176606 6.22468 0.0835054 6.28814 0.0413388 6.38679C-0.00082783 6.48546 0.0158196 6.60103 0.0838445 6.68207L2.6791 9.77397C2.7287 9.83306 2.79991 9.86676 2.87448 9.86676C2.87743 9.86676 2.88041 9.8667 2.88336 9.86659C2.96114 9.86379 3.03371 9.82456 3.0812 9.75953L5.33776 6.67148C5.37356 6.62444 5.39493 6.56474 5.39493 6.49977Z" fill="black" />
                            <path d="M15.9272 6.31698L13.3303 3.22506C13.2807 3.16599 13.2095 3.13232 13.1349 3.13232C13.132 3.13232 13.129 3.13238 13.126 3.13249C13.0482 3.1353 12.9757 3.17455 12.9282 3.23953L10.6688 6.33145C10.6081 6.4145 10.5975 6.52671 10.6414 6.62076C10.6853 6.71484 10.7761 6.77443 10.8755 6.77443H12.4685C12.3953 7.8342 11.9048 8.90867 11.0975 9.7602C10.2202 10.6855 9.09349 11.2162 8.00621 11.2162C7.32403 11.2162 6.65795 11.0407 6.07988 10.7087C6.04084 10.6863 5.99789 10.6752 5.95508 10.6752C5.90333 10.6752 5.8518 10.6914 5.80749 10.7234L4.73472 11.4989C4.66247 11.5511 4.61991 11.6381 4.62137 11.7304C4.62286 11.8227 4.66819 11.9081 4.74208 11.9577C5.71844 12.6135 6.84642 12.96 8.00412 12.96C8.83135 12.96 9.63354 12.7893 10.3888 12.4525C11.1182 12.1273 11.7732 11.6616 12.3356 11.0685C12.898 10.4754 13.3396 9.78449 13.648 9.0151C13.9338 8.30232 14.0935 7.54984 14.124 6.77446H15.7319C15.8345 6.77446 15.9276 6.71099 15.9698 6.61229C16.0119 6.51359 15.9953 6.39803 15.9272 6.31698Z" fill="black" />
                        </g>
                    </svg>
                </div>
                <a href="{{ path('delete_photo') }}" onclick="return confirm('Es-tu sûr(e) de vouloir supprimer ta photo ?')" >
                    <svg width="12" height="16" viewBox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <g opacity="0.5">
                            <path d="M10.2124 2.9388L9.8122 14.3652C9.80541 14.5613 9.64206 14.7274 9.45599 14.7274H2.54403C2.35812 14.7274 2.19461 14.5606 2.18786 14.3652L1.78769 2.9388C1.77669 2.62352 1.52613 2.37744 1.22809 2.38907C0.930049 2.40086 0.697425 2.66575 0.708379 2.98103L1.1084 14.4075C1.13687 15.217 1.77708 15.8698 2.54403 15.8698H9.45599C10.2226 15.8698 10.8631 15.2181 10.8916 14.4075L11.2916 2.98103C11.3026 2.66575 11.07 2.40086 10.7719 2.38907C10.4739 2.37744 10.2233 2.62352 10.2124 2.9388Z" fill="black"/>
                            <path d="M5.56787 5.245V13.0139C5.56787 13.2663 5.76119 13.4708 5.99983 13.4708C6.23847 13.4708 6.43176 13.2663 6.43176 13.0139V5.245C6.43176 4.99251 6.23847 4.78809 5.99983 4.78809C5.76119 4.78809 5.56787 4.99255 5.56787 5.245Z" fill="black"/>
                            <path d="M3.19208 5.25842L3.40816 13.0273C3.41526 13.2796 3.61413 13.4782 3.85258 13.4707C4.0911 13.4633 4.27883 13.2528 4.27173 13.0005L4.05566 5.2317C4.04871 4.97937 3.84969 4.78075 3.6112 4.78829C3.37271 4.7956 3.18514 5.00614 3.19208 5.25842Z" fill="black"/>
                            <path d="M7.94426 5.23121L7.72822 13C7.72112 13.2523 7.90885 13.4629 8.14734 13.4702C8.38586 13.4777 8.58474 13.2791 8.5918 13.0268L8.80787 5.25793C8.81482 5.00561 8.62721 4.79506 8.38872 4.7878C8.15023 4.78033 7.9512 4.97892 7.94426 5.23121Z" fill="black"/>
                            <path d="M0.600059 3.18838H11.4001C11.6982 3.18838 11.9401 2.93271 11.9401 2.61714C11.9401 2.30173 11.6982 2.0459 11.4001 2.0459H0.600059C0.301901 2.0459 0.0600586 2.30173 0.0600586 2.61714C0.0600586 2.93275 0.301901 3.18838 0.600059 3.18838Z" fill="black"/>
                            <path d="M4.35922 2.43164L4.58402 1.59902C4.63223 1.42083 4.8507 1.24644 5.02624 1.24644H6.97379C7.14932 1.24644 7.36779 1.42067 7.41601 1.59902L7.6408 2.43164L8.67922 2.11766L8.45443 1.28521C8.2736 0.616243 7.63147 0.104004 6.97379 0.104004H5.02624C4.36855 0.104004 3.72626 0.616487 3.5456 1.28521L3.3208 2.11766L4.35922 2.43164Z" fill="black"/>
                        </g>
                    </svg>
                </a>
            </div>
        </div>
    </div>
</div>

CodePudding user response：

You should also consider to lower css style specificity.
Not just "nit-picking" but a major issue for web-devs since decades:

Something like this is certainly easier to maintain:

.svg-icon:hover{
  opacity: 0.25;
}

Albeit, it will require additional work on your HTML/template structure.

Highly nested css selectors will unnecessarily complicate maintaining or updating your css code.

.svg-icon{
  fill:red;
  height:3em;
}

.svg-icon-trashcan{
  fill: green;
}

.svg-icon-refresh{
  fill: orange;
}

.svg-icon:hover{
  opacity: 0.25;
  transition: 0.3s;
}

.change-photo-icon-exception 
.svg-icon-trashcan{
  fill: purple
}

.change-photo-icon-exception:hover  
.svg-icon-trashcan{
  transform: scale(1.5)
}

<div >
  <div >
    <div >
      <div >
        <div >
          <svg  viewBox="0 0 16 13">
                      <path d="M5.39 6.5c0-.15-.11-.28-.26-.28H3.54c.08-1.06.57-2.13 1.37-2.98.88-.93 2.01-1.46 3.09-1.46.69 0 1.35.18 1.93.51.04.02.08.03.13.03s.1-.01.14-.04l1.07-.78c.08-.05.12-.14.12-.23s-.05-.18-.12-.23a5.9 5.9 0 0 0-3.26-1H8c-.82 0-1.62.17-2.38.51-.73.32-1.38.79-1.95 1.38-.56.59-1 1.28-1.31 2.05-.28.72-.44 1.47-.47 2.24H.28c-.1 0-.2.07-.24.17a.3.3 0 0 0 .04.29l2.6 3.09c.05.06.12.1.19.1h.01c.08-.01.15-.05.2-.11l2.26-3.09c.03-.05.05-.11.05-.17zm10.54-.18-2.6-3.09a.261.261 0 0 0-.2-.1c-.08.01-.15.04-.2.11l-2.26 3.09a.3.3 0 0 0-.03.29c.05.09.14.15.24.15h1.59c-.07 1.06-.57 2.14-1.37 2.99-.88.93-2.01 1.46-3.09 1.46-.69 0-1.35-.18-1.93-.51a.266.266 0 0 0-.12-.03c-.06 0-.11.01-.15.04l-1.08.78c-.07.05-.11.14-.11.23s.05.18.12.23c.98.65 2.11 1 3.26 1a5.8 5.8 0 0 0 2.39-.51 6.14 6.14 0 0 0 1.95-1.38c.56-.59 1-1.29 1.31-2.05.28-.72.44-1.47.47-2.25h1.61c.1 0 .2-.06.24-.16.04-.1.03-.21-.04-.29z"/></svg>
        </div>
        <a href="#" >
          <svg  viewBox="0 0 12 16"><path d="M10.21 2.94l-.4 11.43c0 0.19-.17 .36-0.35 .36h-6.92 a.37 .37 0 0 1-.35-.36 l-.4 -11.43 a.55 .55 0 0 0 -.56-.55c-.3.01-.53 .28-.52.59l0.4 11.43c.03.81 .67 1.46 1.43 1.46h6.92c.76 0 1.4-.65 1.43-1.46l.4 -11.43c0.01-0.31-.22-0.58-.52-.59a.55 .55 0 0 0 -.56 0.55z
                      M5.57 5.25v7.76c0 .26.19.46.43.46s.43-.2.43-.46V5.25c0-.26-.19-.46-.43-.46s-.43.2-.43.46zm-2.38.01.22 7.77c.01.25.2.45.44.44.24-.01.43-.22.42-.47l-.21-7.77c-.01-.25-.21-.45-.45-.44-.24.01-.42.22-.42.47zm4.75-.03L7.73 13c-.01.25.18.46.42.47.24.01.43-.19.44-.44l.22-7.77c0-.25-.18-.46-.42-.47-.24-.01-.44.19-.45.44zM.6 3.19h10.8c.3 0 .54-.26.54-.57 0-.32-.24-.57-.54-.57H.6c-.3 0-.54.25-.54.57 0 .31.24.57.54.57zm3.76-.76.22-.83c.05-.18.27-.35.45-.35h1.94c.18 0 .4.17.45.35l.22.83 1.04-.31-.23-.83C8.27.62 7.63.1 6.97.1H5.03c-.66 0-1.3.52-1.48 1.19l-.23.83 1.04.31z"/></svg>
        </a>
        <a href="#" >
          <svg  viewBox="0 0 12 16"><path d="M10.21 2.94l-.4 11.43c0 0.19-.17 .36-0.35 .36h-6.92 a.37 .37 0 0 1-.35-.36 l-.4 -11.43 a.55 .55 0 0 0 -.56-.55c-.3.01-.53 .28-.52.59l0.4 11.43c.03.81 .67 1.46 1.43 1.46h6.92c.76 0 1.4-.65 1.43-1.46l.4 -11.43c0.01-0.31-.22-0.58-.52-.59a.55 .55 0 0 0 -.56 0.55z
                      M5.57 5.25v7.76c0 .26.19.46.43.46s.43-.2.43-.46V5.25c0-.26-.19-.46-.43-.46s-.43.2-.43.46zm-2.38.01.22 7.77c.01.25.2.45.44.44.24-.01.43-.22.42-.47l-.21-7.77c-.01-.25-.21-.45-.45-.44-.24.01-.42.22-.42.47zm4.75-.03L7.73 13c-.01.25.18.46.42.47.24.01.43-.19.44-.44l.22-7.77c0-.25-.18-.46-.42-.47-.24-.01-.44.19-.45.44zM.6 3.19h10.8c.3 0 .54-.26.54-.57 0-.32-.24-.57-.54-.57H.6c-.3 0-.54.25-.54.57 0 .31.24.57.54.57zm3.76-.76.22-.83c.05-.18.27-.35.45-.35h1.94c.18 0 .4.17.45.35l.22.83 1.04-.31-.23-.83C8.27.62 7.63.1 6.97.1H5.03c-.66 0-1.3.52-1.48 1.19l-.23.83 1.04.31z"/></svg>
        </a>
      </div>
    </div>
  </div>
</div>

The above example can use pretty flat selector hierarchies, as the icon svg have specific classes.

Besides it's helpful to use rather "semantic" class names ...
Rule of thumb:
Choose naming schemes you're likely to understand after ... 2 years (when you need to maintain your site/app) – I'm still regularly ignoring my own advice.

Specific to svg and icons:
You can easily minify icon svgs by concatenating their path data d attribute – no need for <g> group elements.
(Besides: svg elements like <path> use a black fill color by default – so you don't need to reset fill colors on a group level and then apply specific fills for each path element).

Tools like SVGOMG can help to optimise your svg (albeit the default parameters are quite aggressive and might remove valuable attributes/properties like ids or classes).

It's certainly helpful to know all overriding tricks (e.g. id #selectors override pretty much everthing, !important is also a workaround etc.).

But these "specificity nukes" should always be your last resort.