为什么 CSS 悬停不起作用？

Question

My site is test06.menchasha.ru. I am trying to apply a hover effect. A div in the right should appear when the link, 'Promotional Activities' is hovered. Example

I used the following code:

 .child1 { display: none; } a .title1:hover + .child1 { display: inline-block; }

But the hover effect is not working. What should I correct? Thank you in advance!

Answer 1

I've checked the code in your link - you simply can't achieve the effect you need with your structure and only with CSS.

Here is your code:

a .title1:hover + .child1 {
  display: inline-block;
}

If you want it to work the way you need your a element must have 2 children: .title1 and .child1 , also .child1 must be direct sibling of .title1 cause + selector helps you to access only the nearest sibling of the element. But in your structure all the .child elements are not siblings of .title elements, they are in another div block. So just use JS to make them visible on hover.