Hivatkozások manipulálása (JavaScript)

Hivatkozások manipulálása (JavaScript)
2021-06-12T11:04:07+02:00
2021-06-15T00:52:34+02:00
2022-10-15T21:16:17+02:00
*deleted_23419333
Sziasztok!

Amit szeretnék az gondolom JavaScript nélkül megvalósíthatatlan, ha már így adott a HTML, így ha lehet, akkor jQuery nélküli tiszta JS megoldást szeretnék.

HTML

<div id="post-33" class="post-33 post"> <div class="thumb"> <a href="#"> <img /> </a> </div> <div class="title"> <span class="left-title"> <a href="#">Cím</a> </span> </div> </div><!-- #post-33 -->

Ha például ennél a 33-as post-nál a kurzort a kép fölé viszem, akkor szeretném ha a .left-title alatti hivatkozás is úgy viselkedne mintha afölött is tartanám a kurzort, tehát mintha a:hover lenne a képen is meg a címen is és ugyanezt szeretném, ha a címre viszem a kurzort, akkor az olyan legyen mintha a képen is ott lenne az egérmutató. Természetesen az összes post-nál szeretném ugyanezt.
Mutasd a teljes hozzászólást!
Így oldottam meg. Nem túl elegáns, de egyelőre ez van. Azt nem tudtam megoldani, hogy a #thumb-33 az onmouseover eseményre hover-ként működtesse a #thumb-33-title elemet, így megadtam neki a :hover tulajdonságokat, mint például a szövegszínt, a color-t. Ezt nevezik gányolásnak!? Igen, de lelkiismeretes fejlesztőként igyekszem mielőbb jobb megoldást találni.

HTML

<div id="post-33" class="post-33 post"> <div class="thumb"> <a href="#" id="thumb-33" onmouseover="getid(this,'over');" onmouseout="getid(this,'out');"> <img /> </a> </div> <div class="title"> <span class="left-title"> <a href="#" id="thumb-33-title">Cím</a> </span> </div> </div><!-- #post-33 -->

JavaScript

<script type="text/javascript"> function getid ( obj, x ) { if ( x == 'over' ) { document.getElementById(obj.id+'-title').style.color = 'white'; } else { document.getElementById(obj.id+'-title').style.color = ''; } } </script>
Mutasd a teljes hozzászólást!

  • Tedd mindkét elemet ugyanabb az <a> elembe, és akkor mind a kettőre érvényesül a hover (meg minden egyéb állapot is).

    Példa
    Mutasd a teljes hozzászólást!
  • Ne haragudj, de nekem JavaScript megoldás kell és arra a HTML felépítésre, amit írtam.
    Mutasd a teljes hozzászólást!
  • Abban az esetben tudnék elfogadni JS nélküli CSS megoldást (aminek egyébként jobban is örülnék), ha a HTML felépítése nem változna. Most például rákerestem és látok ilyesmiket:

    1. General sibling combinator (~)
    2. Adjacent sibling combinator (+)
    Mutasd a teljes hozzászólást!
  • :has pszeudo-osztállyal meg lehetne oldani, csak azt meg senki nem támogatja jelenleg. Ilyesmit lehetne akkor megadni:

    .post:has(a:hover) .thumb, .post:has(a:hover) .title { // ide jön a hover formázás }
    Úgy általában CSS-ben nem lehet "felfelé lépni", csak leszármazottakra és testvérekre lehet szűkíteni, szóval nem fogsz tudni olyan szelektort írni hogy a "hovered elem nagyszülőjének tetszőleges leszármazottja".
    Mutasd a teljes hozzászólást!
  • Így oldottam meg. Nem túl elegáns, de egyelőre ez van. Azt nem tudtam megoldani, hogy a #thumb-33 az onmouseover eseményre hover-ként működtesse a #thumb-33-title elemet, így megadtam neki a :hover tulajdonságokat, mint például a szövegszínt, a color-t. Ezt nevezik gányolásnak!? Igen, de lelkiismeretes fejlesztőként igyekszem mielőbb jobb megoldást találni.

    HTML

    <div id="post-33" class="post-33 post"> <div class="thumb"> <a href="#" id="thumb-33" onmouseover="getid(this,'over');" onmouseout="getid(this,'out');"> <img /> </a> </div> <div class="title"> <span class="left-title"> <a href="#" id="thumb-33-title">Cím</a> </span> </div> </div><!-- #post-33 -->

    JavaScript

    <script type="text/javascript"> function getid ( obj, x ) { if ( x == 'over' ) { document.getElementById(obj.id+'-title').style.color = 'white'; } else { document.getElementById(obj.id+'-title').style.color = ''; } } </script>
    Mutasd a teljes hozzászólást!
  • Szenvedsz hoverrel majd nézd meg mobile-on, hogy beragad. 

    Jquery-vel sokkal tisztább kódot lehet írni mint natív javascripttel. 

    Ez így pc az else-ben jöhet a mobile

    if(!navigator.userAgent.match(/Mobile/i) && !navigator.userAgent.match(/iPhone/i) && !navigator.userAgent.match(/iPad/i)) {
    ...........................
    Van a classDiv-ed csinálsz .after class-t és .after2 class-t

    .classDiv .after / .after2

    .classDiv color: red, .after color red, .after2 color: Green

    $(".classDiv").on("touchstart, pointerdown"

    $(this).addClass("after2").removeClass("after")

    $(".classDiv").on("touchend, pointerup"

    $(this).addClass("after").removeClass("after2")

    Az after es after2 be tehetsz transition-t, akkor szépen fokozatosan jelenik meg. 

    Tehát, ha bekövetkezik a pl. a touchstart, akkor a .after2-t arra divre rakhatod amire csak akarod. Egy esemenynel, akar 10 div is megváltozhat. Így csinálhatsz "hover-t" több div-re. Persze ha vége az eseménynek, akkor remove after2 és vissza az .after
    Mutasd a teljes hozzászólást!
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd