Question

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/

 

Answer 1

@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>

 

Comments

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);

???

---

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

---

@reaktywny,  sprawdź 

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));

 

---

OK doczytałem post powyżej.

Answer 2

<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).

 

Comments

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'"
/>

 

---

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

Tu jest dobry przykład:

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