Wątek przeniesiony 2022-08-30 20:22 z Java przez Riddle.
Witam, potrzebuję pomocy w takiej kwestii:
użytkownik najeżdża kursorem na zdjęcie i hover ma zadziałać na inne elementy (zdjęcia), a dokładniej wykonać podkreślenie.
Z tego co wiem, nie da się tego zrobić bezpośrednio w CSS, a potrzebny jest do tego JS.
Bardzo prosiłbym o pomoc w tej kwestii.
Z góry dziękuję.
Ewentualnie możesz się odwołać przez takie selektory, ale to zależy od struktury htmla
https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator
https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator
img:hover + img {
/* ... */
}
img:hover ~ img {
/* ... */
}
Xarviel napisał(a):
Ewentualnie możesz się odwołać przez takie selektory, ale to zależy od struktury htmla
https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator
https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator
img:hover + img { /* ... */ } img:hover ~ img { /* ... */ }
Możesz to zrobić tak jak pisze Xarviel, użyć + lub ~ w CSS; możesz też to oprogramować w JS jak pisze @_13th_Dragon , ale możesz też użyć :hover na rodzicu obrazków, np tak:
<div class="parent">
<img />
<img />
<img />
</div>
.parent:hover img {
border-bottom: 1px solid black; # inne style
}
Rule .parent:hover img zadziała na wszystkie img, które są dzieckiem .parent które ma :hover.
Wtedy najechanie na rodzica, nadal style wszystkim obrazkom.
Dominik Tucholski napisał(a):
Z tego co wiem, nie da się tego zrobić bezpośrednio w CSS, a potrzebny jest do tego JS.
Nie jest jednoznaczne co masz na myśli pisząc o najechaniu myszą na element A i oddziaływaniu na inne elementy B,C D... Jeśli te element są potomkami "A" to na 100% da się to zrobić samym CSS. Także będzie to możliwe jeśli są to elementy sąsiadujące lub w określonym sąsiedztwie o czym wspomniał @Riddle.
Wówczas można to zrobić w samym CSS + HTML https://jsfiddle.net/hgaodtsq/
Gorzej jeśli są to zupełnie niezależne i niepowiązane w żaden sposób z obrazkami elementy wówczas może się okazać, że jedynym rozwiązaniem będzie JS.
Ogólna zasada tworzenia nowoczesnych stron jest jednak taka, że jeśli coś się da zrobić w HTML+CSS to nie jest wskazane używać do tego JS.
Zatem wszystko zależy od Twojego konkretnego przypadki i tego na jakie inne elementy chcesz oddziaływać po najechaniu myszą.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Jak to hoover...</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimal-ui, user-scalable=yes">
</head>
<body>
<div class="box-container">
<a class="box">
<div>
<img src="https://xksi.pl/pl/tempOpen/images/news-kafelki-obrazekboxihg0058ema4364-350-230-1.webp" alt="obrazek 1">
</div>
<h2>Jakiś tytuł 1</h2>
<span>Trochę tekstu do boxa byle co byle było</span>
</a>
<a class="box">
<div>
<img src="https://xksi.pl/pl/tempOpen/images/news-kafelki-obrazekbox7665m3l7785817-350-230-1.webp" alt="obrazek 2">
</div>
<h2>Jakiś tytuł 2</h2>
<span>Trochę tekstu do boxa byle co byle było</span>
</a>
<a class="box">
<div>
<img src="https://xksi.pl/pl/tempOpen/images/news-kafelki-obrazekbox40byq6xo8qffr4-350-230-1.webp" alt="obrazek 3">
</div>
<h2>Jakiś tytuł 3</h2>
<span>Trochę tekstu do boxa byle co byle było</span>
</a>
</div>
<style>
body{
font-family:Verdana, Tahoma, Arial;
font-size:16px;
}
.box-container{
width:100%;
box-sizing:border-box;
}
/* Ogólny wygląd boxa */
.box{
display:block;
box-sizing:border-box;
width:calc(100% / 3 - 30px);
min-width:280px;
margin:15px;
float:left;
border:solid 1px #ddd;
border-radius:5px;
padding:15px;
cursor:pointer;
transition:all 300ms ease;
}
/* kontener na zdjęcie */
.box>div{
width:100%;
height:300px;
overflow:hidden;
box-sizing:border-box;
border-radius:5px;
}
/* samo zdjęcie */
.box>div>img{
width:100%;
height:100%;
object-fit:cover;
transition:all 300ms ease;
}
/* tytuł boxa */
.box h2{
color:#036;
}
/* HOVER dla poszczególnych elementów */
.box:hover{
border-color:#f60;
background:#f60;
color:#fff;
box-shadow:0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)
}
.box:hover h2{
color:#fff;
}
.box:hover>div>img{
transform:scale(1.2) rotate(5deg);
}
</style>
</body>
</html>
Witam ponownie, bardzo dziękuje wszystkim za wartościowe odpowiedzi. Taka dawka wiedzy na pewno się przyda. Poniżej podsyłam poglądowe zdjęcie oco dokładnie mi chodzi. Jeżeli potrzeba jeszcze więcej informacji to chętnie udzielę. Bardzo zależy mi na rozwiązaniu tego problemu. Przetestowałem kody powyżej i działało mi to tylko na 1 kolumnie. Nigdy wcześniej nie miałem doczynienia z takim efektem. Pozdrawiam serdecznie i z góry dziękuję za odpowiedzi. 
Pewnie gdyby coś "kosmicznie" pokombinować to może by dało się zrobić w CSS ale z tego co widzę do tego najłatwiej będzie użyć JavaScript.
https://jsfiddle.net/ktfq628p/
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Jak to hoover...</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimal-ui, user-scalable=yes">
</head>
<body>
<div class="box-container">
<a class="box" data-box-no=1>
<div>
<img src="https://xksi.pl/pl/tempOpen/images/news-kafelki-obrazekboxihg0058ema4364-350-230-1.webp" alt="obrazek 1">
</div>
<h2>Jakiś tytuł 1</h2>
<span>Trochę tekstu do boxa byle co byle było</span>
</a>
<a class="box" data-box-no=2>
<div>
<img src="https://xksi.pl/pl/tempOpen/images/news-kafelki-obrazekbox7665m3l7785817-350-230-1.webp" alt="obrazek 2">
</div>
<h2>Jakiś tytuł 2</h2>
<span>Trochę tekstu do boxa byle co byle było</span>
</a>
<a class="box" data-box-no=3>
<div>
<img src="https://xksi.pl/pl/tempOpen/images/news-kafelki-obrazekbox40byq6xo8qffr4-350-230-1.webp" alt="obrazek 3">
</div>
<h2>Jakiś tytuł 3</h2>
<span>Trochę tekstu do boxa byle co byle było</span>
</a>
</div>
<div class="box-related">
<div data-related=1>related-1-</div>
<div data-related=2>related-2-</div>
<div data-related=1>related-1-</div>
<div data-related=3>related-3-</div>
<div data-related=3>related-3-</div>
<div data-related=2>related-2-</div>
<div data-related=2>related-2-</div>
<div data-related=3>related-3-</div>
</div>
<script>
/*
dołączam obsługę zdarzenia mouseOver dla boxów głównych
*/
let boxMainList = document.querySelectorAll ( ".box" );
boxMainList.forEach( (boxEl)=>{
boxEl.addEventListener("mouseover",()=>{
// aktywuję wybrane
let relationNumber = boxEl.getAttribute("data-box-no");
let relatedBoxList = document.querySelectorAll ( "[data-related=\""+relationNumber.toString()+"\"]" );
relatedBoxList.forEach( (boxRel)=>{
boxRel.classList.add ("active");
} );
});
boxEl.addEventListener("mouseout",()=>{
// deaktywuję wszystkie
let relatedBoxListAll = document.querySelectorAll ( "[data-related]" );
relatedBoxListAll.forEach ( (boxRel)=>{
boxRel.classList.remove("active");
});
});
});
</script>
<style>
body{
font-family:Verdana, Tahoma, Arial;
font-size:16px;
}
.box-container{
width:100%;
box-sizing:border-box;
}
/* Ogólny wygląd boxa */
.box{
display:block;
box-sizing:border-box;
width:calc(100% / 3 - 30px);
min-width:280px;
margin:15px;
float:left;
border:solid 1px #ddd;
border-radius:5px;
padding:15px;
cursor:pointer;
transition:all 300ms ease;
}
/* kontener na zdjęcie */
.box>div{
width:100%;
height:300px;
overflow:hidden;
box-sizing:border-box;
border-radius:5px;
}
/* samo zdjęcie */
.box>div>img{
width:100%;
height:100%;
object-fit:cover;
transition:all 300ms ease;
}
/* tytuł boxa */
.box h2{
color:#036;
}
/* HOVER dla poszczególnych elementów */
.box:hover{
border-color:#f60;
background:#f60;
color:#fff;
box-shadow:0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)
}
.box:hover h2{
color:#fff;
}
.box:hover>div>img{
transform:scale(1.2) rotate(5deg);
}
/*
boxy dodatkowe
*/
.box-related{
width:100%;
float:left;
}
.box-related>div{
width:calc(100% / 4 - 20px);
margin:10px;
background:#f60;
color:#fff;
padding:30px 0px;
text-align:center;
float:left;
border-radius:5px;
transition:all 300ms ease;
}
.box-related>div.active{
background:#000;
}
</style>
</body>
</html>
Witam! @katakrowa jestem ci bardzo wdzięczny, twój kod bardzo mi pomógł. Obecnie mam jeszcze tylko problem z następującymi kwestiami:
W jaki sposób można określić więcej wariantów w tym data related, żeby nie odnosiło się tylko do jednego numerka. Zamieniłem prostokąty na zdjęcia. Konkretnie chodzi mi o to jak na zdjęciu.
Jeżeli coś będzie nie jasne to oczywiście mogę lepiej to wytłumaczyć. Z góry dziękuję za odpowiedz. Pozdrawiam serdecznie i życzę miłego dnia. 
Powinno zadziałać:
<div data-related="1,2,3,4">related-1-</div>
@_13th_Dragon: niestety nie działa :/
Dominik Tucholski napisał(a):
@_13th_Dragon: niestety nie działa :/
niestety dalej nie działa
_13th_Dragon napisał(a):
Powinno zadziałać:
<div data-related="1,2,3,4">related-1-</div>
Idea dobra ale bez modyfikacji JS nie zadziała.
Konieczne jest wprowadzenie zmian w fragmencie, który wskazał @_13th_Dragon aczkolwiek zmiana wymaga czegoś więcej ni tylko dopisania kolejnych identyfikatorów w atrybucie data-related.
Dostałeś gotowca i uważam, że mógłbyś wykazać odrobię więcej samodzielności poprzez zrozumienie tego co dostałeś.
W tej chwili wygląda na to, że w ciemno nie rozumiejąc jak działa obecne rozwiązanie prowadzisz eksperymenty na zasadzie może się uda...
Ten kod wymaga modyfikacji:
boxEl.addEventListener("mouseover",()=>{
// aktywuję wybrane
let relationNumber = boxEl.getAttribute("data-box-no");
let relatedBoxList = document.querySelectorAll ( "[data-related=\""+relationNumber.toString()+"\"]" ); // <--- na co to zamienić?
relatedBoxList.forEach( (boxRel)=>{
boxRel.classList.add ("active");
} );
});
Problem się sprowadza do tego żeby tak zmodyfikować linę:
let relatedBoxList = document.querySelectorAll ( "[data-related=\""+relationNumber.toString()+"\"]" ); // <--- na co to zamienić?
aby w zmiennej relatedBoxList znalazły się elementy, które w wartości atrybyutu data-related mają wartość relationNumber.
Pamiętaj, że wartość atrybutu to ciąg liczb oddzielonych znakiem przecinka.
Można też zrobić mniej elegancko i zastosować wiele atrybutów bez wartości. Np.
<div data-related-1 data-related-4 data-related-5>xxxxx</div>
Wówczas selektor elementów do podświetlenia wyglądałby tak:
let relatedBoxList = document.querySelectorAll ( "[data-related-"+relationNumber.toString()+"]" );
Jednak w tym przypadku konieczna będzie zmiana JS odpowiadającego za czyszczenie podświetlenia.