Custom div-box css manage + js into mail field

  • Resolved nipait

    (@nipait)


    5 years, 4 months ago

    Hi all and I Ben ??

    I’m day by day adding features to my Tracks template but sometimes I get stuck in a glass of water and can’t get out of there.

    This time I want to show a “div-box” while hovering Telegram Icon in the Social Media Bar in the top-right corner and – once the hovering is over – dismiss it.

    To do so I’m using this css but…it doesn’t work!

    a.telegram:hover ~ .telegram-box { background-color: black !important; visibility: visible; }
.telegram-box { width: 50%; height: 30%; background-color: red; visibility: hidden; }

    and I’m sure that the logic is right.

    Furthemore, I’d suggest to Ben to add some “encryption feature” to the email address in the social media bar in order to avoid spam.
    I tried to implement the code got from https://www.jottings.com/obfuscator/ but it must be hard coded so atm I’ll avoid…:)

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Theme Author Ben Sibley

    (@bensibley)

    It looks like .telegram-box has been inserted into the beginning of the body element. CSS selectors can only be used to select descendants. The “~” character (sibling selector) you’re using is one of a couple of special exceptions and will target a sibling element of a.telegram. The .telegram-box is not a sibling element so this is why it is not affected by the :hover CSS.

    You can add the telegram box content within the social media icons HTML, or use Javascript to make it appear when someone hovers over a.telegram.

    As for the email obfuscation, Tracks uses the antispambot() WordPress function to convert some characters into HTML entities. Here’s an example of what an email address social icon looks like in the source code: https://pics.competethemes.com/b8cec8333bc8

    Thread Starter nipait

    (@nipait)

    Hi Ben,

    thank you for your prompt reply!

    I was trying to develop something as you suggested but it becomes too much dirty…I’ve tried with JS but still it will be not as cleaner as I’d like.

    I’ll think anything different.

    Thank you again ??

    • This reply was modified 5 years, 4 months ago by nipait.
    Theme Author Ben Sibley

    (@bensibley)

    Yea this customization can get pretty complex. I did have an idea though just now. As long as you only want text in the box – it cannot have links or any other formatting – you can use this workaround: 

    a.telegram:after {
	content: 'This is text';
	font-size: 14px;
	background: red;
	display: block;
	padding: 2px 4px;
	position: absolute;
	visibility: hidden;
	white-space: nowrap;
}
a.telegram:hover:after {
	visibility: visible;
}

    That adds a “pseudo-element” (:after) to the Telegram icon which only shows when you hover over the icon. The content property is where you can configure the text you want to display. Again, this can’t be anything besides plain text, but I hope that can work for what you had in mind ??

    • This reply was modified 5 years, 4 months ago by Ben Sibley.
    Thread Starter nipait

    (@nipait)

    Hi Ben,-

    thank you for your reply and your suggestion.
    Unfortunately your suggestion cannot be used as my idea was setting inside the a <script> function from Telegram’s API…

    I’ll do something different.

    Thank you for your effort anyway, you rock!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Custom div-box css manage + js into mail field’ is closed to new replies.