0

I'm new in HTML and CSS. In fact, it's my first site I build in my learning. Why doesn't :hover effect work on the class I've pointed it to?

I'd be really thankful for every help. But please explain, don't just show me "how to".

I'm trying to get the search_type selector getting visible only after hoovering the "search" button

Thanks in advance. (Here's the edited to be simpler code)

https://codepen.io/_Hiderr/pen/WNNdJdo

Hiderr
  • 85
  • 10
  • 3
    Would be very helpful have the minimal code here to reproduce the issue. Your question sounds like you may need javascript, as the behavior is not possible with CSS alone unless your HTML and CSS are structured in a very specific way. Again, minimal reproducible example here in your question is the best way to get help on SO. – BugsArePeopleToo Nov 02 '19 at 17:50
  • Hello! Thank you for help. I uploaded the minimal code :D – Hiderr Nov 02 '19 at 19:03

2 Answers2

1

Like so: https://codepen.io/bjorniobennett/pen/OJJzZrX?editors=1100

The basic behaviour of :hover is that it can affect itself and the elements inside of it, or the next adjacent sibling . So I wrapped the search button and the select element in it's own container, and placed the :hover on the container itself. By placing the :hover on the container, you can now manipulate it's children.

   <div class="search-container">
     <select class="search selector" name="search_type">
       <option value="">Videos</option>
       <option value="search_users">Channels</option>
     </select>
     <input class="search button" type="submit" value="Search" />
   </div>
Bjorn.B
  • 1,473
  • 1
  • 10
  • 11
  • Wow! That's exactly what I wanted to achieve! Thank you so much. Also really good explenation. – Hiderr Nov 02 '19 at 19:28
  • No problem @Hiderr! Be sure to select it as the answer in case someone comes across this question and needs to see the answer that helped ya! – Bjorn.B Nov 02 '19 at 20:25
  • :hover does not work only for elements inside the hovered element. The selector used in the given code ( search.button:hover ~ .search.selector ) is able to affect every following adjacent element on hover – but not the previous. This is not possible with css. – andreaslangsays Nov 02 '19 at 21:08
  • @andreaslangsays ah yes, that is true. I have edited my answer. The adjacent sibling selector is very specific, that I rarely use it and subsequently forgot it existed. Good catch. Cheers – Bjorn.B Nov 02 '19 at 21:19
0

Seems that your css selector has no match in the markup: search.button:hover ~ .search.selector would match any element like this: <button class="search button">Search</button> <span class="search selector">Selected</span>

See: https://codepen.io/andreaslangsays/pen/RwwxyEN

andreaslangsays
  • 329
  • 4
  • 7