Is there a way to specifically style the element I am hovering over with Tailwind Typography and prose?

Currently, I am customizing my markdown pages with Tailwind typography and prose. I am facing an issue where the hover effect is being applied to all images at once instead of just the one being hovered over. Any ideas on how to fix this?

Here is a snippet of my code:

<article
    class="prose-img:w-full prose-img:rounded-2xl prose-img:object-cover prose-img:transition-all prose-img:duration-500 prose-img:ease-out prose-img:hover:scale-[1.01] prose-img:md:rounded-3xl"
>

I tried using prose-img:hover in hopes that it would only affect the image being hovered on, but it ends up affecting all images. Additionally, hovering on one image triggers the effect on all images. Any suggestions to resolve this issue?

cssfrontendtailwind-cssmarkdown

Answer №1

According to the provided documentation, the order of stacked modifiers can be important:

Sequence of stacked modifiers

Modifiers are applied in an inside-out manner when stacked, similar to nested function calls:

// These modifiers:
'dark:group-hover:focus:opacity-100'

// ...are applied like this:
dark(groupHover(focus('opacity-100')))

In most cases, it might not make a significant difference, but there are scenarios where the ordering of modifiers leads to distinct CSS styles being generated.

In your case, you are using prose-img:hover:, which is akin to prose-img(hover(…)). This would resolve to:

  1. hover: – applying hover effect to this element (the <article>).
  2. Selecting all <img> elements within the prose.

However, what you might actually intend is the reverse, hover:prose-img::

  1. Selecting all <img> elements within the prose.
  2. hover: – triggering hover effect on this element (the <img> element within the prose).

<script src="https://cdn.tailwindcss.com/3.4.1?plugins=typography"></script>

<article
  class="prose-img:w-full prose-img:rounded-2xl prose-img:object-cover prose-img:transition-all prose-img:duration-500 prose-img:ease-out hover:prose-img:scale-[1.01] prose-img:md:rounded-3xl"
>
  <img src="https://picsum.photos/500/100">
  <img src="https://picsum.photos/500/100?">
</article>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Create a resizable textarea within a flexbox container that allows for scrolling

Hey there! I'm struggling with a Flexbox Container that has three children. The first child contains a textarea, but it's overflowing beyond its parent element. Additionally, I want to make the content within child 2 and 3 scrollable. I've ...

css

Grid with a column range of 1 to 3 should be used

My website currently features a grid that can have anywhere from 1 to 3 columns. To ensure flexibility in the number of columns, I am using auto-fit: .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min-content, 1fr)); gap: 40px; ...

htmlcsssasscss-grid

Having trouble getting the carousel slider to function properly on meteor?

I am currently working on my portfolio page using Meteor, and I want to include a carousel slider gallery. The problem I'm facing is that while the first gallery works fine, the second one does not load correctly and just displays a list of pictures. ...

cssmeteorcarousel

Adjusting the width of row items in Angular by modifying the CSS styles

I am envisioning a horizontal bar with items that are all the same width and evenly spaced apart. They can expand vertically as needed. Check out the updated version here on StackBlitz Issue: I am struggling to automatically set the width of the row elem ...

cssangulartypescript

Ensure tables are vertically centered when printing an HTML page

I need to export two tables, each measuring 7cm×15cm, to a PDF file with A4 portrait paper size using the browser's "Save to PDF" option in the print tool. My goal is to center these two tables vertically on the A4 paper. If that proves difficult, I ...

htmlcssprinting

I'm having trouble aligning my <div> element in the center and I'm not sure what the issue could be

I'm attempting to center the image. It seems like it should be a simple fix, but I've experimented with multiple solutions and even started from scratch three times. #main_image { background-color: bisque; position: fixed; display: block; ...

htmlcss

Expanding across the entire horizontal space, excluding any space allocated for

I've been on a quest to find a solution for my unique problem, but all my efforts have been in vain so far. Currently, I'm working on developing a mobile website and facing a challenge with the input boxes. Despite wanting them to take up the en ...

htmlcss

Minimize the number of clicks needed to navigate using the HTML/JavaScript navigation

On my website, I have a navigation bar that changes the contents of a div when a user clicks on an item. However, if the user clicks multiple times in quick succession, the content changes too many times. I want to ensure that the content only changes once ...

javascriptjqueryhtmlcss

Having Trouble with Your CSS Styles?

After working with HTML and CSS for over 5 years, I find myself stumped by this particular issue. At the provided URL, there is a single div in that container with an ID of Clarity. The CSS rules I have implemented are as follows: #clarity { text-align: ...

htmlcss

Delete the placeholder image from a div once live content has been inserted into it

If I have a container div that displays an image when empty, but I want to remove the image when content is dynamically added to the container, what would be the most effective way to do this with jQuery? The usual method of checking if the container' ...

javascriptjqueryhtmlcss

"Guide to triggering the display of a particular div based on its class when clicked

I have multiple div elements with the class name dis HTML: <div class="dis">Content</div> <div class="dis">Content</div> <div class="dis">Content</div> and so on ... Additionally, there are various images: <img sr ...

javascripthtmlcss

A floating transparent Turing image transformed into a clickable image

After creating an image button with a transparent black hover effect, I noticed that the image no longer functions as a "button." However, the hover effect still works. Is there a way to maintain the button functionality while keeping the color overlay? V ...

htmlcss

What is the best way to toggle a specific div element within an ng-repeat loop?

I have a list of products. When I click on a product, it should be added to the database. If I click on the same product again, it should be removed from the database. I am toggling the wishlistFlag using ng-click. This works correctly for one div element, ...

javascripthtmlcssangularjs

Differences in <img> sizing behavior between Chrome and Firefox

Objective: Develop a scrollable image-gallery web component with layouting that functions without script intervention. Specifications: The size of the web component must be fully responsive and/or adjustable. The top main area of the widget is the galle ...

cssimageflexboxgalleryimage-size

implement a dropdown feature for a vertical menu with the help of Jquery

Struggling to implement a dropdown feature on a vertical navigation using Jquery. The HTML includes a nav section with 1st level list items and nested li's for second level menu items. On clicking the 1st level li, the intention is to toggle SHOW/HID ...

javascriptjqueryhtmlcssdrop-down-menu

How to avoid clipping in Bootstrap 4 when a row overflows with horizontal scrolling

In order to allow for horizontal scrolling of all contained columns, I created a row using the row class. To implement this feature, I followed advice from a contributor on Stack Overflow. You can view their answer by following this link: Bootstrap 4 hori ...

cssscrollbootstrap-4overflowclipping

Reset the text input field when the dropdown menu is set to 'no/other'

CURRENT: Choosing from a dropdown menu with options 'Yes' or 'No'. If 'Yes' is chosen: Display additional dropdowns/inputs for entry If 'No' is chosen: Conceal additional dropdowns/inputs WANT: I am looking to imp ...

javascriptphpjqueryhtmlcss

Is there a way to move the navbar to the right side of the screen?

How do I create a navigation menu that takes up half of the screen on the left side while allowing for scrolling on the right side without moving the navigation? What I am aiming for is similar to the images linked below: example example I attempted to u ...

htmlcssbootstrap-4

JavaScript-generated div not recognizing CSS in Internet Explorer

Once again, dealing with Internet Explorer has become a major headache. On headset.no, we have incorporated a small blue search field. However, when you input "jabra" into the field, it should generate suggestions in a div underneath. This feature operates ...

javascripthtmlcssinternet-explorer

Is there a way to place my searchbox in the top right corner of the page?

I am currently working on creating a search function for my list of products. However, I have encountered an issue where the searchBox is not appearing in the top right corner as intended. Despite trying various solutions, I have been unsuccessful in movin ...

javascriptcssreactjs