• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

jak podmienić zdjęcie i podpis po najechaniu przycisku "jak w ASUS"

Hosting forpsi easy 1 pln
+2 głosów
115 wizyt
pytanie zadane 10 listopada w HTML i CSS przez Hary-86 Obywatel (1,630 p.)

jak podmienić zdjęcie i podpis po najechaniu przycisku "jak w ASUS": (może jakaś wytczka w wordpress?)

https://www.asus.com/pl/motherboards-components/motherboards/prime/prime-b450-plus/

 

2 odpowiedzi

+1 głos
odpowiedź 11 listopada przez VBService Ekspert (246,070 p.)
edycja 11 listopada przez VBService

@reaktywny;

Wyczytałem, że można tego dokonać z poziomu CSS.

Tu jest dobry przykład:
https://sirv.com/help/articles/hover-change-image/

ten przykład pokazuje :hover tylko na obrazku a OP pyta o

@Hary-86;

jak podmienić zdjęcie i podpis po najechaniu przycisku

 

przykład tylko css  [ kod on-line ]

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
.container {
  position: relative;
  width: 90vw;
  height: 80vh;
  margin: 1rem auto;

  display: flex;
  justify-content: flex-end;
  gap: 2rem;
  background-color: black;
  padding-right: 1rem;
}
span.icon {
  display: block;
  font: bold 1.6rem/1.2 system-ui, monospace;
  height: 3rem;
  padding: .75rem .75rem 0 .75rem;
  margin-top: 1rem;
  text-align: center;
  border-radius: 50%;
  cursor: help;
  color: gray;
  transition: all 250ms;
}
span.icon span {
  font-size: 50%;
  font-weight: normal;
}
span.icon:hover {
  background-color: hsl(0 10% 20%);
  color: white;
}
span.icon:hover + img,
span.icon:hover + img + span.desc {
  opacity: 1;
  z-index: 99;
}
img {
  position: absolute;
  left: 0;
  opacity: 0;
  transition: opacity 250ms;
  width: max(300px, 45vw);
  height: 80vh;
  object-fit: content; /* lub cover */
  object-position: center;
  z-index: 1;
}
img:first-child {
  opacity: 1;
}
span.desc {
  position: absolute;
  bottom: 0;
  right: 0;
  width: max(100px, 40vw);
  height: 4.5rem;
  font: 400 1rem/1.1 system-ui, monospace;
  padding: 1rem;
  background-color: darkblue;
  color: white;
  opacity: 0;
  transition: opacity 250ms;
}
span.desc::before {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-25%);
  left: -15px;
  margin-top: -7.5px;
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-right: 20px solid darkblue;
}
<div class="container">
  <img src="https://picsum.photos/400/200?random=100">

  <span class="icon">&spades;<br><span>Lorem 1</span></span>
  <img src="https://picsum.photos/400/200?random=1">
  <span class="desc">
    Lorem ipsum 1, lorem ipsum 1 1111 111 111. Ipsum 1 1111111 11 11111.
  </span>

  <span class="icon">&clubs;<br><span>Lorem 2</span></span>
  <img src="https://picsum.photos/400/200?random=2">
  <span class="desc">
    Lorem ipsum 2, lorem ipsum 2 2222 222 222. Ipsum 2 2222222 22 22222.
  </span>

  <span class="icon">&hearts;<br><span>Lorem 3</span></span>
  <img src="https://picsum.photos/400/200?random=3">
  <span class="desc">
    Lorem ipsum 3, lorem ipsum 3 3333 333 333. Ipsum 3 3333333 33 33333.
  </span>
</div>

 

komentarz 11 listopada przez reaktywny Nałogowiec (38,490 p.)
Fajny przykłąd!

Do czego jest ten kod (w wersji on-line):

 console.clear();
  const a = '446 204'.replaceAll(' ','');
  const b = '326 331'.replaceAll(' ','');
  console.log(+a - +b);

???
1
komentarz 11 listopada przez VBService Ekspert (246,070 p.)

A to testowałem do czegoś innego zapis ze znakiem + zamiast parseInt() i zapomniałem usunąć. wink

komentarz 11 listopada przez VBService Ekspert (246,070 p.)

@reaktywny,  sprawdź wink

console.clear();
let a = '446 204';
let b = '326 331';

console.info('a: ' + a, 'b: ' + b);
console.warn('a - b: ' + (a - b));
console.warn('a + b: ' + (a + b));

a = a.replaceAll(' ','');
b = b.replaceAll(' ','');

console.log(+a - +b);
console.log(parseInt(a) - parseInt(b));

 

komentarz 11 listopada przez reaktywny Nałogowiec (38,490 p.)
edycja 11 listopada przez reaktywny
OK doczytałem post powyżej.
0 głosów
odpowiedź 10 listopada przez reaktywny Nałogowiec (38,490 p.)
edycja 10 listopada przez reaktywny
<img src="1.jpg" onmouseover="hover(this);" onmouseout="hoverOut(this); "/>

// -------------------------------------

function hoverOut(img) {
 img.src = "1.jpg" 
}

function hover(img)
{
 img.src = "2.jpg"
}

Jak będziesz się chciał zająć czymś bardziej poważnym to polecam Svelte (oraz SvelteKIt).

 

1
komentarz 10 listopada przez VBService Ekspert (246,070 p.)

Na dzień dzisiejszy nie jest dobrą praktyką programowania odwoływanie się do funkcji za pomocą atrybutów event-ów (w tym przypadku onmouseover, onmouseout) z poziomu kodu html, a jeżeli już, to można też to zapisać np. tak

<img src="1.jpg" alt=""
     onmouseover="this.src='1_hover.jpg'"                                                     
     onmouseout="this.src='1.jpg'"
/>

 

komentarz 10 listopada przez reaktywny Nałogowiec (38,490 p.)
edycja 11 listopada przez reaktywny
Wyczytałem, że można tego dokonać z poziomu CSS.

Tu jest dobry przykład:

https://sirv.com/help/articles/hover-change-image/

Podobne pytania

0 głosów
1 odpowiedź 155 wizyt
pytanie zadane 28 sierpnia 2022 w HTML i CSS przez jasper93 Obywatel (1,310 p.)
+1 głos
2 odpowiedzi 326 wizyt
0 głosów
0 odpowiedzi 183 wizyt
pytanie zadane 4 września 2017 w PHP przez ayo1001 Obywatel (1,890 p.)

92,133 zapytań

140,789 odpowiedzi

317,830 komentarzy

61,457 pasjonatów

Advent of Code 2023

Top 15 użytkowników

  1. 1886p. - Łukasz Eckert
  2. 1856p. - Dawid128
  3. 1844p. - Marcin Putra
  4. 1844p. - CC PL
  5. 1818p. - rafalszastok
  6. 1775p. - Mikbac
  7. 1760p. - rucin93
  8. 1741p. - sefirek
  9. 1682p. - Adrian Wieprzkowicz
  10. 1652p. - Eryk Andrzejewski
  11. 1644p. - jaroslawroszyk
  12. 1565p. - Rafał Trójniak
  13. 1467p. - dia-Chann
  14. 1445p. - nidomika
  15. 1424p. - ssynowiec
Szczegóły i pełne wyniki

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Uwaga - w dniach od 02.12 do 08.12 trwają Mikołajki (książki drukowane mają rabat -35%, ebooki do -45%). Zaś dodatkowy, specjalny kod zniżkowy: HELMIKOLAJ-10 dla naszych Widzów zapewni Wam oszczędność -10zł dla zamówień powyżej 70zł! Warto korzystać!

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...