CODEWITHSUNDEEP
htmlcsshover
majan
majan

Reputation: 139

Change link color when main div is hover

my issue is that, when I hover over my div, it doesn't change the links color to what I want it to be. It just stays its default black color as it is defined. But when I hover on link directly in div then link change color.

How can I make it so that when I hover over main div, it changes the color of the link inside in div?

Link to my website: https://www.temporary-url.com/CF16F6 tail: more news

I have code like below:

div.zsm_block_news > div.zsm_block_content > div:nth-child(2) > div:nth-child(3):hover a
{
     color: #CB701A;  
}

/* unvisited link */

div.zsm_block_news > div.zsm_block_content > div:nth-child(2) > div:nth-child(3) > p:nth-child(3) > a:link
{
  color: #333333;
}

/* visited link */
div.zsm_block_news > div.zsm_block_content > div:nth-child(2) > div:nth-child(3) > p:nth-child(3) > a:visited
{
  color: #CB701A;
}

/* selected link */
div.zsm_block_news > div.zsm_block_content > div:nth-child(2) > div:nth-child(3) > p:nth-child(3) > a:active 
{
  color: #333333;
}

/* mouse over link */
div.zsm_block_news > div.zsm_block_content > div:nth-child(2) > div:nth-child(3) > p:nth-child(3) > a:hover
{
  color: #CB701A;
}

Upvotes: 0

Views: 41

Answers (1)

Caidyn Ginger
Caidyn Ginger

Reputation: 23

you want to place the :hover attribute on the div rather than the a tag

/* mouse over link */
div.zsm_block_news > div.zsm_block_content > div:nth-child(2) > div:nth-child(3) > p:nth-child(3):hover > a
{
  color: #CB701A;
}

Upvotes: 1

Related Questions