Transforming a child element on hover with Javascript

I am trying to have an icon that switches class when the parent div is hovered.
So far, here is my code:

var actionIcon = document.querySelector(".task > svg")

var taskContainer = document.querySelector(".task")



function iconScale() {

  actionIcon.classList.toggle('big');

}



taskContainer.onmouseenter = iconScale

taskContainer.onmouseleave = iconScale

And the HTML:

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    <path d="..." />

  </svg>

</div>

My issue is that the effect I am trying to achieve is only happening on the very first parent element and none of the other ones.
I'm pretty sure I am not specifying something but I don't know what. Anyone could give me a hint?

edited Jan 2 at 0:47

j08691

167k20194213

asked Jan 2 at 0:36

Moromain

456

can you post the accompanying HTML. Have you used console to check you have an object (i.e. is you querySelector working. ). Also is the code being correctly executed when DOM has loaded?

– Bibberty
Jan 2 at 0:42

Oh sorry. Missed that. There are multiple of these?

– Bibberty
Jan 2 at 0:54

Yep that's where I'm stuck.

– Moromain
Jan 2 at 0:56

Fixed answer. Should work for you now. (please up vote.)

– Bibberty
Jan 2 at 0:59

1

no need to use JS and .big { --> .task:hover svg { background-color: blue; } is enough

– MrJ
Jan 2 at 1:05

|
show 1 more comment

I am trying to have an icon that switches class when the parent div is hovered.
So far, here is my code:

var actionIcon = document.querySelector(".task > svg")

var taskContainer = document.querySelector(".task")



function iconScale() {

  actionIcon.classList.toggle('big');

}



taskContainer.onmouseenter = iconScale

taskContainer.onmouseleave = iconScale

And the HTML:

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    <path d="..." />

  </svg>

</div>

edited Jan 2 at 0:47

j08691

167k20194213

asked Jan 2 at 0:36

Moromain

456

can you post the accompanying HTML. Have you used console to check you have an object (i.e. is you querySelector working. ). Also is the code being correctly executed when DOM has loaded?

– Bibberty
Jan 2 at 0:42

Oh sorry. Missed that. There are multiple of these?

– Bibberty
Jan 2 at 0:54

Yep that's where I'm stuck.

– Moromain
Jan 2 at 0:56

Fixed answer. Should work for you now. (please up vote.)

– Bibberty
Jan 2 at 0:59

1

no need to use JS and .big { --> .task:hover svg { background-color: blue; } is enough

– MrJ
Jan 2 at 1:05

|
show 1 more comment

I am trying to have an icon that switches class when the parent div is hovered.
So far, here is my code:

var actionIcon = document.querySelector(".task > svg")

var taskContainer = document.querySelector(".task")



function iconScale() {

  actionIcon.classList.toggle('big');

}



taskContainer.onmouseenter = iconScale

taskContainer.onmouseleave = iconScale

And the HTML:

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    <path d="..." />

  </svg>

</div>

edited Jan 2 at 0:47

j08691

167k20194213

asked Jan 2 at 0:36

Moromain

456

I am trying to have an icon that switches class when the parent div is hovered.
So far, here is my code:

var actionIcon = document.querySelector(".task > svg")

var taskContainer = document.querySelector(".task")



function iconScale() {

  actionIcon.classList.toggle('big');

}



taskContainer.onmouseenter = iconScale

taskContainer.onmouseleave = iconScale

And the HTML:

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    <path d="..." />

  </svg>

</div>

javascript

edited Jan 2 at 0:47

j08691

167k20194213

asked Jan 2 at 0:36

Moromain

456

edited Jan 2 at 0:47

j08691

167k20194213

asked Jan 2 at 0:36

Moromain

456

edited Jan 2 at 0:47

j08691

167k20194213

edited Jan 2 at 0:47

j08691

167k20194213

edited Jan 2 at 0:47

j08691

167k20194213

asked Jan 2 at 0:36

Moromain

456

asked Jan 2 at 0:36

Moromain

456

asked Jan 2 at 0:36

Moromain

456

can you post the accompanying HTML. Have you used console to check you have an object (i.e. is you querySelector working. ). Also is the code being correctly executed when DOM has loaded?

– Bibberty
Jan 2 at 0:42

Oh sorry. Missed that. There are multiple of these?

– Bibberty
Jan 2 at 0:54

Yep that's where I'm stuck.

– Moromain
Jan 2 at 0:56

Fixed answer. Should work for you now. (please up vote.)

– Bibberty
Jan 2 at 0:59

1

no need to use JS and .big { --> .task:hover svg { background-color: blue; } is enough

– MrJ
Jan 2 at 1:05

|
show 1 more comment

can you post the accompanying HTML. Have you used console to check you have an object (i.e. is you querySelector working. ). Also is the code being correctly executed when DOM has loaded?

– Bibberty
Jan 2 at 0:42

Oh sorry. Missed that. There are multiple of these?

– Bibberty
Jan 2 at 0:54

Yep that's where I'm stuck.

– Moromain
Jan 2 at 0:56

Fixed answer. Should work for you now. (please up vote.)

– Bibberty
Jan 2 at 0:59

1

no need to use JS and .big { --> .task:hover svg { background-color: blue; } is enough

– MrJ
Jan 2 at 1:05

can you post the accompanying HTML. Have you used console to check you have an object (i.e. is you querySelector working. ). Also is the code being correctly executed when DOM has loaded?

– Bibberty
Jan 2 at 0:42

Oh sorry. Missed that. There are multiple of these?

– Bibberty
Jan 2 at 0:54

Yep that's where I'm stuck.

– Moromain
Jan 2 at 0:56

Fixed answer. Should work for you now. (please up vote.)

– Bibberty
Jan 2 at 0:59

no need to use JS and .big { --> .task:hover svg { background-color: blue; } is enough

– MrJ
Jan 2 at 1:05

|
show 1 more comment

2 Answers
2

active

oldest

votes

Fixed code to map to ALL divs that are tasks. Cannot use querySelector as it only returns first instance.

const actionIcon = (parent) => {

  return parent.querySelector('svg');

};



document.addEventListener('DOMContentLoaded', function() {



  // Add events to ALL divs that conform

  let tasks = document.getElementsByClassName('task');

  

  for(let t of tasks) {

    t.onmouseenter = iconScale;

    t.onmouseleave = iconScale;

  }



  function iconScale(event) {

    let icon = actionIcon(event.target);

    icon.classList.toggle('big');

  }

});

svg {

  height: 50px;

  width: 50px;

  background-color: red;

} 



.big {

  background-color: blue;

}

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    

  </svg>

</div>

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    

  </svg>

</div>

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    

  </svg>

</div>

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    

  </svg>

</div>

edited Jan 2 at 1:13

answered Jan 2 at 0:48

Bibberty

1,6411214

My CSS is as simple as in your example (.big{transform: scale(1.2);}). I tried to modify my code as you suggested but nothing changes... It just works for the first element and not the other ones. Am I not missing something like specifying the div when it's hovered??

– Moromain
Jan 2 at 0:55

Works perfectly! Thanks a lot for your help :)

– Moromain
Jan 2 at 1:04

1

Most welcome. Ensure you include the DOMContentLoaded call as this ensures your DOM content is loaded and ready to bind events.

– Bibberty
Jan 2 at 1:05

is yours DIV.task have the same parent ?

– MrJ
Jan 2 at 1:08

1

@Herohtar thanks for tip have edited code to reflect you for .. of comment. My bad

– Bibberty
Jan 2 at 1:14

|
show 2 more comments

You asked for JavaScript, but as an alternative and simpler example, you don't even need to use JavaScript; what you want can be done entirely in CSS:

svg {

  height: 50px;

  width: 50px;

  background-color: red;

}



.task:hover svg {

  background-color: blue;

}

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    

  </svg>

</div>

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    

  </svg>

</div>

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    

  </svg>

</div>

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    

  </svg>

</div>

answered Jan 2 at 1:21

Herohtar

2,94711927

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54000057%2ftransforming-a-child-element-on-hover-with-javascript%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

Fixed code to map to ALL divs that are tasks. Cannot use querySelector as it only returns first instance.

const actionIcon = (parent) => {

  return parent.querySelector('svg');

};



document.addEventListener('DOMContentLoaded', function() {



  // Add events to ALL divs that conform

  let tasks = document.getElementsByClassName('task');

  

  for(let t of tasks) {

    t.onmouseenter = iconScale;

    t.onmouseleave = iconScale;

  }



  function iconScale(event) {

    let icon = actionIcon(event.target);

    icon.classList.toggle('big');

  }

});

svg {

  height: 50px;

  width: 50px;

  background-color: red;

} 



.big {

  background-color: blue;

}

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    

  </svg>

</div>

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    

  </svg>

</div>

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    

  </svg>

</div>

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    

  </svg>

</div>

edited Jan 2 at 1:13

answered Jan 2 at 0:48

Bibberty

1,6411214

My CSS is as simple as in your example (.big{transform: scale(1.2);}). I tried to modify my code as you suggested but nothing changes... It just works for the first element and not the other ones. Am I not missing something like specifying the div when it's hovered??

– Moromain
Jan 2 at 0:55

Works perfectly! Thanks a lot for your help :)

– Moromain
Jan 2 at 1:04

1

Most welcome. Ensure you include the DOMContentLoaded call as this ensures your DOM content is loaded and ready to bind events.

– Bibberty
Jan 2 at 1:05

is yours DIV.task have the same parent ?

– MrJ
Jan 2 at 1:08

1

@Herohtar thanks for tip have edited code to reflect you for .. of comment. My bad

– Bibberty
Jan 2 at 1:14

|
show 2 more comments

Fixed code to map to ALL divs that are tasks. Cannot use querySelector as it only returns first instance.

const actionIcon = (parent) => {

  return parent.querySelector('svg');

};



document.addEventListener('DOMContentLoaded', function() {



  // Add events to ALL divs that conform

  let tasks = document.getElementsByClassName('task');

  

  for(let t of tasks) {

    t.onmouseenter = iconScale;

    t.onmouseleave = iconScale;

  }



  function iconScale(event) {

    let icon = actionIcon(event.target);

    icon.classList.toggle('big');

  }

});

svg {

  height: 50px;

  width: 50px;

  background-color: red;

} 



.big {

  background-color: blue;

}

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    

  </svg>

</div>

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    

  </svg>

</div>

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    

  </svg>

</div>

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    

  </svg>

</div>

edited Jan 2 at 1:13

answered Jan 2 at 0:48

Bibberty

1,6411214

My CSS is as simple as in your example (.big{transform: scale(1.2);}). I tried to modify my code as you suggested but nothing changes... It just works for the first element and not the other ones. Am I not missing something like specifying the div when it's hovered??

– Moromain
Jan 2 at 0:55

Works perfectly! Thanks a lot for your help :)

– Moromain
Jan 2 at 1:04

1

Most welcome. Ensure you include the DOMContentLoaded call as this ensures your DOM content is loaded and ready to bind events.

– Bibberty
Jan 2 at 1:05

is yours DIV.task have the same parent ?

– MrJ
Jan 2 at 1:08

1

@Herohtar thanks for tip have edited code to reflect you for .. of comment. My bad

– Bibberty
Jan 2 at 1:14

|
show 2 more comments

Fixed code to map to ALL divs that are tasks. Cannot use querySelector as it only returns first instance.

const actionIcon = (parent) => {

  return parent.querySelector('svg');

};



document.addEventListener('DOMContentLoaded', function() {



  // Add events to ALL divs that conform

  let tasks = document.getElementsByClassName('task');

  

  for(let t of tasks) {

    t.onmouseenter = iconScale;

    t.onmouseleave = iconScale;

  }



  function iconScale(event) {

    let icon = actionIcon(event.target);

    icon.classList.toggle('big');

  }

});

svg {

  height: 50px;

  width: 50px;

  background-color: red;

} 



.big {

  background-color: blue;

}

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    

  </svg>

</div>

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    

  </svg>

</div>

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    

  </svg>

</div>

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    

  </svg>

</div>

edited Jan 2 at 1:13

answered Jan 2 at 0:48

Bibberty

1,6411214

Fixed code to map to ALL divs that are tasks. Cannot use querySelector as it only returns first instance.

const actionIcon = (parent) => {

  return parent.querySelector('svg');

};



document.addEventListener('DOMContentLoaded', function() {



  // Add events to ALL divs that conform

  let tasks = document.getElementsByClassName('task');

  

  for(let t of tasks) {

    t.onmouseenter = iconScale;

    t.onmouseleave = iconScale;

  }



  function iconScale(event) {

    let icon = actionIcon(event.target);

    icon.classList.toggle('big');

  }

});

svg {

  height: 50px;

  width: 50px;

  background-color: red;

} 



.big {

  background-color: blue;

}

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    

  </svg>

</div>

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    

  </svg>

</div>

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    

  </svg>

</div>

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    

  </svg>

</div>

const actionIcon = (parent) => {

  return parent.querySelector('svg');

};



document.addEventListener('DOMContentLoaded', function() {



  // Add events to ALL divs that conform

  let tasks = document.getElementsByClassName('task');

  

  for(let t of tasks) {

    t.onmouseenter = iconScale;

    t.onmouseleave = iconScale;

  }



  function iconScale(event) {

    let icon = actionIcon(event.target);

    icon.classList.toggle('big');

  }

});

svg {

  height: 50px;

  width: 50px;

  background-color: red;

} 



.big {

  background-color: blue;

}

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    

  </svg>

</div>

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    

  </svg>

</div>

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    

  </svg>

</div>

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    

  </svg>

</div>

const actionIcon = (parent) => {

  return parent.querySelector('svg');

};



document.addEventListener('DOMContentLoaded', function() {



  // Add events to ALL divs that conform

  let tasks = document.getElementsByClassName('task');

  

  for(let t of tasks) {

    t.onmouseenter = iconScale;

    t.onmouseleave = iconScale;

  }



  function iconScale(event) {

    let icon = actionIcon(event.target);

    icon.classList.toggle('big');

  }

});

svg {

  height: 50px;

  width: 50px;

  background-color: red;

} 



.big {

  background-color: blue;

}

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    

  </svg>

</div>

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    

  </svg>

</div>

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    

  </svg>

</div>

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    

  </svg>

</div>

edited Jan 2 at 1:13

answered Jan 2 at 0:48

Bibberty

1,6411214

edited Jan 2 at 1:13

answered Jan 2 at 0:48

Bibberty

1,6411214

answered Jan 2 at 0:48

Bibberty

1,6411214

answered Jan 2 at 0:48

Bibberty

1,6411214

My CSS is as simple as in your example (.big{transform: scale(1.2);}). I tried to modify my code as you suggested but nothing changes... It just works for the first element and not the other ones. Am I not missing something like specifying the div when it's hovered??

– Moromain
Jan 2 at 0:55

Works perfectly! Thanks a lot for your help :)

– Moromain
Jan 2 at 1:04

1

Most welcome. Ensure you include the DOMContentLoaded call as this ensures your DOM content is loaded and ready to bind events.

– Bibberty
Jan 2 at 1:05

is yours DIV.task have the same parent ?

– MrJ
Jan 2 at 1:08

1

@Herohtar thanks for tip have edited code to reflect you for .. of comment. My bad

– Bibberty
Jan 2 at 1:14

|
show 2 more comments

My CSS is as simple as in your example (.big{transform: scale(1.2);}). I tried to modify my code as you suggested but nothing changes... It just works for the first element and not the other ones. Am I not missing something like specifying the div when it's hovered??

– Moromain
Jan 2 at 0:55

Works perfectly! Thanks a lot for your help :)

– Moromain
Jan 2 at 1:04

1

Most welcome. Ensure you include the DOMContentLoaded call as this ensures your DOM content is loaded and ready to bind events.

– Bibberty
Jan 2 at 1:05

is yours DIV.task have the same parent ?

– MrJ
Jan 2 at 1:08

1

@Herohtar thanks for tip have edited code to reflect you for .. of comment. My bad

– Bibberty
Jan 2 at 1:14

My CSS is as simple as in your example (.big{transform: scale(1.2);}). I tried to modify my code as you suggested but nothing changes... It just works for the first element and not the other ones. Am I not missing something like specifying the div when it's hovered??

– Moromain
Jan 2 at 0:55

Works perfectly! Thanks a lot for your help :)

– Moromain
Jan 2 at 1:04

Most welcome. Ensure you include the DOMContentLoaded call as this ensures your DOM content is loaded and ready to bind events.

– Bibberty
Jan 2 at 1:05

is yours DIV.task have the same parent ?

– MrJ
Jan 2 at 1:08

@Herohtar thanks for tip have edited code to reflect you for .. of comment. My bad

– Bibberty
Jan 2 at 1:14

|
show 2 more comments

You asked for JavaScript, but as an alternative and simpler example, you don't even need to use JavaScript; what you want can be done entirely in CSS:

svg {

  height: 50px;

  width: 50px;

  background-color: red;

}



.task:hover svg {

  background-color: blue;

}

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    

  </svg>

</div>

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    

  </svg>

</div>

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    

  </svg>

</div>

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    

  </svg>

</div>

answered Jan 2 at 1:21

Herohtar

2,94711927

add a comment |

You asked for JavaScript, but as an alternative and simpler example, you don't even need to use JavaScript; what you want can be done entirely in CSS:

svg {

  height: 50px;

  width: 50px;

  background-color: red;

}



.task:hover svg {

  background-color: blue;

}

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    

  </svg>

</div>

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    

  </svg>

</div>

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    

  </svg>

</div>

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    

  </svg>

</div>

answered Jan 2 at 1:21

Herohtar

2,94711927

add a comment |

You asked for JavaScript, but as an alternative and simpler example, you don't even need to use JavaScript; what you want can be done entirely in CSS:

svg {

  height: 50px;

  width: 50px;

  background-color: red;

}



.task:hover svg {

  background-color: blue;

}

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    

  </svg>

</div>

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    

  </svg>

</div>

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    

  </svg>

</div>

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    

  </svg>

</div>

answered Jan 2 at 1:21

Herohtar

2,94711927

You asked for JavaScript, but as an alternative and simpler example, you don't even need to use JavaScript; what you want can be done entirely in CSS:

svg {

  height: 50px;

  width: 50px;

  background-color: red;

}



.task:hover svg {

  background-color: blue;

}

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    

  </svg>

</div>

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    

  </svg>

</div>

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    

  </svg>

</div>

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    

  </svg>

</div>

svg {

  height: 50px;

  width: 50px;

  background-color: red;

}



.task:hover svg {

  background-color: blue;

}

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    

  </svg>

</div>

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    

  </svg>

</div>

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    

  </svg>

</div>

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    

  </svg>

</div>

svg {

  height: 50px;

  width: 50px;

  background-color: red;

}



.task:hover svg {

  background-color: blue;

}

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    

  </svg>

</div>

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    

  </svg>

</div>

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    

  </svg>

</div>

<div class="task">

  <h3>Title</h3>

  <svg viewBox="0 0 24 24">

    

  </svg>

</div>

answered Jan 2 at 1:21

Herohtar

2,94711927

answered Jan 2 at 1:21

Herohtar

2,94711927

answered Jan 2 at 1:21

Herohtar

2,94711927

answered Jan 2 at 1:21

Herohtar

2,94711927

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Bdtjtk