• 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"

Object Storage Arubacloud
+2 głosów
153 wizyt
pytanie zadane 10 listopada 2023 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 2023 przez VBService Ekspert (254,570 p.)
edycja 11 listopada 2023 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 2023 przez reaktywny Nałogowiec (41,110 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 2023 przez VBService Ekspert (254,570 p.)

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

komentarz 11 listopada 2023 przez VBService Ekspert (254,570 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 2023 przez reaktywny Nałogowiec (41,110 p.)
edycja 11 listopada 2023 przez reaktywny
OK doczytałem post powyżej.
0 głosów
odpowiedź 10 listopada 2023 przez reaktywny Nałogowiec (41,110 p.)
edycja 10 listopada 2023 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 2023 przez VBService Ekspert (254,570 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 2023 przez reaktywny Nałogowiec (41,110 p.)
edycja 11 listopada 2023 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ź 179 wizyt
pytanie zadane 28 sierpnia 2022 w HTML i CSS przez jasper93 Obywatel (1,310 p.)
+1 głos
2 odpowiedzi 361 wizyt
0 głosów
0 odpowiedzi 191 wizyt
pytanie zadane 4 września 2017 w PHP przez ayo1001 Obywatel (1,890 p.)

92,690 zapytań

141,603 odpowiedzi

320,100 komentarzy

62,051 pasjonatów

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.

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!

...