25279

CSS - Hover on element doesn't apply style to another one

Question:

I have a problem with applying style to a div when another div is hovered. Here is my scenario:

<div id="nav"> <div class="logged"></div> <div class="nav_child"></div> </div> <pre class="lang-css prettyprint-override">.logged:hover .nav_child { display: initial; } #nav .nav_child { display: none; }

But it doesn't work. I also tried .logged:hover > .nav_child and .logged:hover + .nav_child and still nothing. It only works with #nav:hover .nav_child but I need to show it when .logged is hovered, not when #nav is hovered.

Any ideas?

Answer1:

Just solved with the <strong>Adjacent sibling combinator</strong>. I declare and call 'logged' as id and add + between .logged:hover and .nav_child it works.

<em>Reference: Adjacent sibling combinator: <a href="http://css-tricks.com/child-and-sibling-selectors" rel="nofollow">http://css-tricks.com/child-and-sibling-selectors</a></em>

Old code: <a href="http://jsfiddle.net/8rdh7m2j/" rel="nofollow">http://jsfiddle.net/8rdh7m2j/</a>

Working code:

<div id="nav"> <div class="logged" id="logged">Hello</div> <div class="nav_child">Puff</div> </div> #logged:hover + .nav_child { display: initial; } #nav .nav_child { display: none; }

Demo: <a href="http://jsfiddle.net/hwh3o8u0/1/" rel="nofollow">http://jsfiddle.net/hwh3o8u0/1/</a>

Answer2:

Even just remove the #nav from child and +

.logged:hover+.nav_child { display:initial; } .nav_child { display: none; }

<a href="http://jsfiddle.net/dz22m10y/" rel="nofollow">http://jsfiddle.net/dz22m10y/</a>

Answer3:

You were on the right track with the .logged:hover + .nav_child approach. The reason it didn't work is that #nav .nav_child has higher specificity (because it includes an ID), and therefore takes precedence over the preceding rule.

Yes, you could solve that by moving to an ID for logged, as you did in your self-answer, but instead of doing that, you could raise specificity of the hovering rule by adding in the ID you've already got there too:

#nav .logged:hover + nav_child {

By the way, such problems can nearly always be tracked down using the style inspector in your browser's dev panel. In this case, you would see both rules, and you would see that the second was overriding the first. That would easily lead you to the conclusion that it is a specificity problem. Most style inspectors will give you the ability to "emulate" a hovering state.

For more information on specificity, see <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity</a>. In your case, your original first rule had a specificity of 20 (two classes), and the second one 101 (one ID and one class).

Answer4:

Here is a good resource that covers this topic http://jsfiddle.net/ThinkingStiff/a3y52/ <div id="nav"> <div id="one" class="logged"></div> <div id="two" class="nav_child"></div> </div> #one:hover ~ two, { background-color: black; color: white; }

Recommend

  • Class initialization failing
  • Make Radio Button Clickable Link
  • How to optimize 4x4 matrix multiplication?
  • How to reduce hash value's length?
  • How to protect/Hide Javascript method or JS file from user to view [duplicate]
  • Vim automatic scroll buffer
  • How to improve memory footprint for iPad apps
  • XNA MediaPlayer fastforward/rewind
  • How can I gracefully degrade CSS viewport units?
  • Password-protect the macros of a second workbook from a first using VBA
  • ruby - lazily iterate through an array
  • Is there a way to clone native functions in javascript like window.alert or document.write
  • Copying rows in a database when rows have children
  • Passing information to server-side function in a Google Docs Add On
  • Why doesnt this Java loop in a thread work?
  • cell spacing in div table
  • Is there a way to dynamically embed PDF Files in a JSP pulled from the file system?
  • using System.Speech.Synthesis with Windows10 universal app (XAML-C#)
  • GAE: Way to get reference to an HttpSession from its ID?
  • Spring boot 2.0.0.M4 required a bean named 'entityManagerFactory' that could not be found
  • What is the purpose of TaskExecutor in spring?
  • How to clear text inside text field when radio button is select
  • Xamarin Forms - UWP Fonts
  • Why ng-show works with ng-repeat but ng-if doesn't? [duplicate]
  • Get object from AWS S3 as a stream
  • Cross-Platform Protobuf Serialization
  • Validaiting emails with Net.Mail MailAddress
  • Do I've to free mysql result after storing it?
  • Acquiring multiple attributes from .xml file in c#
  • Angular 2 constructor injection vs direct access
  • How to CLICK on IE download dialog box i.e.(Open, Save, Save As…)
  • Java static initializers and reflection
  • Change div Background jquery
  • Android Google Maps API OnLocationChanged only called once
  • How does Linux kernel interrupt the application?
  • How can I remove ASP.NET Designer.cs files?
  • Busy indicator not showing up in wpf window [duplicate]
  • UserPrincipal.Current returns apppool on IIS
  • Why do underscore prefixed variables exist?
  • java string with new operator and a literal