zmiana elementu po najechaniu na inny element

Question

Witam mam pytanie czy dałoby sie zmienic element na stronie "iced" po najechaniu na element listy "a1"?

Próbowałem wpisujac .a1:hover .iced ale to nie zadziałało a innego sposobu nie znalazłem

<div class="local-description">
			<div class="description">
				<div class=" iced"></div>

				<div class="description-content">
					<h1 class="local-h1">Tytul</h1>
					<ul class="menu">
						<li class=" a1">Słowo</li>
					</ul>
				</div>	

			</div>
		</div>

 

Answer 1

W skrócie: selektory nie działają wstecz. Przy takim układzie HTML-a pozostaje tylko JS

Comments

nieprawda, focus-within działą :D

---

@niezalogowany,  a wiesz moze jak powinien wygladać taki kod w JS albo moze znasz jakas strone na ktorej to jest wyjaśnione?

---

Musisz dodać event listener (mouseenter) do elementu z klasą .a1
W handlerze zmienić element .iced
I droga powrotna, dodać event listener na mouseleave, żeby przywrócić .iced do stanu początkowego

---

@dawid6512  

Answer 2

<style>

.iced-hover{
	background-color:red;

}

</style>

<div class="local-description">
	<div class="description">
		<div class=" iced">ICED</div>

		<div class="description-content">
			<h1 class="local-h1">Tytul</h1>
			<ul class="menu">
				<li class=" a1">Słowo</li>
			</ul>
		</div>    

	</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>


$(".a1").hover(

	 function (){
		$(this).parents().find(".iced").addClass("iced-hover");
	},
	 function (){
		$(this).parents().find(".iced").removeClass("iced-hover");
	},


);

</script>

 

Prosty przykład przy użyciu jquery funkcji hover().

Po najechaniu dodaje klasę iced-hover, po usunięciu myszki z elementu usuwa tę klasę.

 

Comments

a co można dodać żeby był nie było takiego przeskakiwania tylko był efekt przejścia?

---

https://www.w3schools.com/css/css3_transitions.asp