How do I create a Hover effect with Quarto ?

[Paulogcd]

Description

Hello,

I am a beginner with Quarto and I would like to know if it allows for a hover effect.

I am trying to make the sentence "The github repository of this presentation" appear when the user has its mouse on the Github icon of my navbar, I don't really know how to implement it, since I was not familiar with the YAML syntax before using Quarto.

For now, my _quarto.yml file looks like :

project:
  type: website
  output-dir: docs

website:
  title: "The Presentation"
  navbar:
    title: false
    background: '#D3D3D3'
    left:
      - href: ../
        text: Home
      - href: index.qmd
        text: Our project
      - href: about.qmd
        text: About
      - icon: github
        href: http://the_url_of_my_repository.com
format:
  html:
    theme: cosmo
    css: styles.css
    toc: true

I am using Quarto 1.4.553
with macOS 11.2.3.

Thank you in advance.

[mcanouil]

See #7510 where it has been discussed in the past.
Additionally, Quarto is based on Bootstrap, so learning this framework can help: https://getbootstrap.com/.

[Paulogcd]

Thank you for your answer, I missed this previous post when looking for an answer. I will try to reproduce it.