Hover effect zonder plugin

  • NickSuy

    (@nicksuy)


    8 jaren, 10 maanden geleden

    Hallo,

    Ik gebruik twee erg handige plugins, namelijk Black Studio TinyMCE Widget en Page Builder by SiteOrigin, die ervoor zorgen dat ik makkelijk pagina’s kan opbouwen. Met de page builder kan je rijen maken en daarin kolommen optrekken om de lay-out van je pagina makkelijk te laten verlopen. In die kolommen kan je dan tekst zetten.

    Bij het maken van zo’n kolom kan je verscheidene opties aanpassen. Zo kan je de achtergrondkleur en padding aanpassen, maar ook zelf CSS-code inbrengen (dit doe je onder ‘attributen’). Daar komt dus mijn vraag.

    Wanneer ik er bijvoorbeeld volgende tekst inzet, kleurt de achtergrond inderdaad rood zoals het hoort (zoals je ziet, geen selector, enkel de property en value):

    “background-color: red !important;”

    Maar ik wil graag dat wanneer mijn muis over de kolom gaat, de achtergrond een andere kleur krijgt. Er zou dus ergens een ‘:hover’ bij moeten komen. Maar aangezien dit bij een selector hoort, weet ik niet hoe ik dit moet oplossen.

    Is er iemand die ervaring met deze plugins weet en/of een antwoord op mijn vraag heeft?

    Ik zou het graag zonder plugin oplossen, maar als iemand een goede plugin weet die dit kan (geen image hover enz) zou dit misschien ook een oplossing kunnen zijn.

    Met vriendelijke groeten,
    Nick Suykerbuyk

6 reacties aan het bekijken - 1 tot 6 (van in totaal 6)
  • W.P. Ginfo

    (@wp-ginfo)

    8 jaren, 10 maanden geleden

    Hi Nick,
    — — — aanvullende info nodig
    Je stelt hierboven een aantal vragen die we hier doorgaans kunnen beantwoorden.
    Bovenstaande is echter nog onvoldoende duidelijk waar je problemen precies zitten en wat je precies wilt bereiken.
    — — —
    Er zijn heel veel verschillende wordpress-thema’s!
    Geef de volgende info, dan kunnen we ZIEN wat je bedoelt! 😉

    Zo krijgen we een beter beeld van jouw situatie en kunnen we meedenken en adviseren.

    Thread starter NickSuy

    (@nicksuy)

    8 jaren, 10 maanden geleden

    Hey,

    Ik begrijp dat het misschien wat moeilijk uitgelegd is. Maar ik denk niet dat het thema iets te maken heeft met wat ik wil doen.

    Op http://www.horendonk.be zie je dat ik met enkele lichtgrijze vakjes werk, waar tekst in staat. De bedoeling is gewoonweg om deze vakjes een andere kleur te geven wanneer iemand er met z’n muis over gaat.

    Ideaal zou zijn dat dit lukt zonder een plugin: via de twee eerder vernoemde plugins waarmee je gemakkelijk de lay-out van een pagina kan bepalen, kan je CSS in elke kolom afzonderlijk toevoegen (zie onderstaande link). De plugin is zo ontworpen dat je CSS kan veranderen van elke kolom, maar ik weet niet hoe ik er een :hover effect aan kan toevoegen.

    Door hieronder op ‘Attributes’ te klikken kan de CSS van elke kolom afzonderlijk worden bepaald.
    http://imagenation.theopensourcery.com/wp-content/uploads/2015/01/siteocss1.gif
    Zo ziet het er dan uit. Bij ‘CSS styles’ kan je gewoon code toevoegen zoals ‘background-color: grey;’
    https://siteorigin.com/wp-content/uploads/2014/12/PB22.jpg

    Het thema dat ik gebruik is ‘evolve’.

    Voor de duidelijkheid, met een goede plugin zou dit ook eventueel kunnen. Ik vind er echter geen simpele die enkel doet wat ik verlang, enkel plugins die met image hover enz. werken.

    Alvast bedankt!
    Nick Suykerbuyk

    Anna Webdesign

    (@anna-webdesign)

    8 jaren, 10 maanden geleden

    Hoi!

    Ik weet niet precies hoe je dat met die plugins zou moeten doen maar ik zou het met CSS in de style.css bepalen!

    Als je alles dezelfde achtergrondkleur wil geven voeg je dit toe aan de style.css :

    .panel-widget-style:hover {
    background-color: #000!important;
}

    En als je liever elk blokje een andere achtergrond kleur zou willen geven:

    div#panel-4-1-0-0 .panel-widget-style:hover {
    background-color: #fff!important;
}

div#panel-4-1-1-0 .panel-widget-style:hover {
    background-color: #000!important;
}

div#panel-4-1-0-1 .panel-widget-style:hover {
    background-color: #ff0000!important;
}

div#panel-4-1-1-1 .panel-widget-style:hover {
    background-color: #0A09B5!important;
}

    En dan natuurlijk zelf nog even de goede achtergrondkleur erbij zoeken 🙂

    Het beste is trouwens om een child theme te maken. Als je theme dan update dan blijven de style.css wijzigingen behouden! Hoe je dat eventueel kan doen vind je hier: Child Theme maken

    W.P. Ginfo

    (@wp-ginfo)

    8 jaren, 10 maanden geleden

    Hi,

    ik denk niet dat het thema iets te maken heeft met wat ik wil doen.

    Als het over de ’techniek sec’ gaat, heb je gelijk… Echter elk thema is anders opgebouwd en gebruikt andere namen voor de elementen in de layout.
    Daarmee wordt de syntax dus net even anders.

    == == ==
    Bovenstaande oplossing van @anna Webdesign klopt, maar vereist dat je elk blokje apart opneemt in het CSS met een eigen kleur.

    Onderstaand doet dit met één aanpassing. Kijk maar wat het beste past bij jouw situatie.
    Pas de kleuren aan naar wens…

    .so-panel :hover  {
    background-color:#99cc66 !important;/*achtergrondkleur*/
    color:#ff0000 !important; /*tekstkleur*/
}

    Thread starter NickSuy

    (@nicksuy)

    8 jaren, 10 maanden geleden

    Hey,

    Bedankt voor jullie antwoorden! De oplossing van W.P. Ginfo heeft me al goed geholpen maar het is nog niet helemaal in orde.

    Zoals je op de voorpagina kan zien (http://horendonk.be/) staan daar grijze blokken maar ook gewoon tekst. Deze tekst wordt echter ook beïnvloed door de CSS die we hebben ingevoegd, met andere woorden, ook de tekstvakken krijgen een andere achtergrondkleur wanneer mijn muis erover gaat.

    Een mogelijke oplossing zie ik nu door elk grijs blokje manueel een class te geven, en de class in bovestaande CSS te vervangen door degene die ik erbij heb gezet. Dit is veel werk maar lijkt me wel mogelijk.

    W.P. Ginfo

    (@wp-ginfo)

    8 jaren, 10 maanden geleden

    Hi,

    Dank voor de aanvullende info.
    Het lijkt er idd op dat de oplossing van @anna Webdesign ‘minder bijwerkingen’ heeft.

    Implementeer haar code en vul deze aan met de elementen die je verder nog wil aanpassen.
    Hiervoor hoef je geen nieuwe classes aan te maken, maar kan je de huidige namen van de elementen gebruiken.

    — — —
    Druk <F12> en je krijgt zicht op de elementen van je pagina’s.
    Mbv je muis krijg je alle gewenste elementen[op de pagina] en alle CSS-waarden [re-onderaan] in beeld
    In de regel onderaan zie je de elementen en hun ‘parent / herkomst’
    Op die manier kan je heel precies zaken zo aanpassen als jij wilt…
    helaas wel ff wat werk.
    Loop je vast? Vraag gerust.
    Veel succes.

6 reacties aan het bekijken - 1 tot 6 (van in totaal 6)
  • Het onderwerp ‘Hover effect zonder plugin’ is gesloten voor nieuwe reacties.