CODEWITHSUNDEEP
htmlcss
anithi1
anithi1

Reputation: 13

How do I change only one part of a CSS class for different text elements(under the same class)?

Summary: In my code, when hovering over a text element, an image appears underneath. I want to do this with other text elements, and the only thing I want to change is the image url. However, I don't want to make a whole new item:hover class to change the url of the image that appears after hovering. Is there any way to work around this?

I have two items styled with the same class.

<h6 class = "item"> felucian garden spread </h6>
<h6 class = "item"> yobshrimp noodle salad </h6>

When hovering on "item," my CSS below makes an image appear. However, I want a different image to appear when hovering over "yobshrimp noodle salad." Is there a way to do this, even if they are under the same class? I am trying to avoid making a new class and hover event for every menu item.

.item:hover:after {
  content: "";
  background-image:url(felucian.jpg); // <- i want to change this part *only* for a different text, "yobshrimp noodle salad"
  background-size: 100% 100%;
  margin-left: 30%;
  display: block;
  height: 266px;
  width: 437px;
  -webkit-animation: fade-in-top 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
            animation: fade-in-top 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  left: 150px;
  top: 50px;
  transition: all ease-in-out 1s
}

Upvotes: 0

Views: 1183

Answers (3)

somerandomdev49
somerandomdev49

Reputation: 307

You could use a custom attribute! In your HTML:

<h6 class="item" data-hover-image="felucian.jpg">felucian garden spread</h6>
<h6 class="item" data-hover-image="yobshrimp.jpg">yobshrimp noodle salad</h6>

And in CSS:

.item :hover :after {
  ...
  background-image: attr(data-hover-image url); 
}

About attr(): read here

Edit:

Since not a lot of browsers support custom attributes, you could use javascript to iterate through all of the .item elements and change their url. For example:

const items = document.getElementsByClassName("item");
for(const item of items) {
  item.style.backgroundImage =
    "url(" + item.getAttribute("data-hover-image") + ")";
}

Upvotes: 2

JakeAve
JakeAve

Reputation: 376

Without undoing the HTML you have, this is really only easily accomplished with CSS Custom properties. https://developer.mozilla.org/en-US/docs/Web/CSS/--*

CSS - Create a custom property for the background image with something like this:

.item {
  --bg-url: url(felucian.jpg); /* you might want to set a default or something on the class */
}

.item:hover:after {
  content: "";
  background-image: var(--bg-url); /* use the custom prop like this */
  background-size: 100% 100%;
  margin-left: 30%;
  display: block;
  height: 266px;
  width: 437px;
  -webkit-animation: fade-in-top 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  animation: fade-in-top 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  left: 150px;
  top: 50px;
  transition: all ease-in-out 1s;
}

HTML - Use inline styles to override the --bg-url.

<h6 class = "item" style="--bg-url: url(felucian.jpg);"> felucian garden spread </h6>
<h6 class = "item" style="--bg-url: url(yobshrimp.jpg);"> yobshrimp noodle salad </h6>

Faced with similar things, I've opted to make <img> tags in the HTML and use selectors to have the images only appear on hover or focus, but this technically would work.

Upvotes: 0

tacoshy
tacoshy

Reputation: 13012

youc an use :nth-child() as in the example below. With that you can select a specific element according to certain rules. For the 2nd element with the class-name, use :nth-child(2)

.item:nth-child(2):hover {
  background-color: yellow;
}
<h6 class = "item"> felucian garden spread </h6>
<h6 class = "item"> yobshrimp noodle salad </h6>

Upvotes: 0

Related Questions