Is it achievable to customize the appearance of links with identical classes but distinct title attributes?

Currently updating my website and unable to access the HTML directly.

I'm curious if it's feasible to produce various hover effects for image links within parent divs that share the same name but have different title tags.

Here is the code snippet: 

.project-panel .pp-thumb img {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 170px;
  height: 127px;
}

.project-panel .pp-thumb:hover img {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(http://couill.art/wp-content/uploads/2018/05/Thicc-Girls-thumb.gif) no-repeat;
  width: 170px;
  /* Width of new image */
  height: 127px;
  /* Height of new image */
  padding-left: 170px;
  background-size: contain;
}
<div class="pp-thumb column" data-xl-width="2" data-sm-width="4" data-xs-width="6">
  <a href="http://couill.art/project/danger-zone-duplicate-3" title="Danger Zone"><img src="http://couill.art/wp-content/uploads/2018/05/Thicc-Girls-thumb.png" width="200" height="150"></a>
  <p class="pp-title"><a data-font="font_dqju2lgtu" href="http://couill.art/project/danger-zone-duplicate-3" title="Danger Zone">Danger Zone</a><span data-font="font_dqju2lgtu">Animation</span></p>
</div>

<div class="pp-thumb column" data-xl-width="2" data-sm-width="4" data-xs-width="6">
  <a href="http://couill.art/project/danger-ii" title="Danger II"><img src="http://couill.art/wp-content/uploads/2018/05/chauve-souris-0-00-02-19.png" width="200" height="150"></a>
  <p class="pp-title"><a data-font="font_dqju2lgtu" href="http://couill.art/project/danger-ii" title="Danger II">Danger II</a><span data-font="font_dqju2lgtu">Animation</span></p>
</div>

I was able to modify the hover state for all links using the CSS provided, but customizing a different state for each link seems more challenging.

Your advice on this matter would be greatly appreciated :)

htmlcsshoveranchor

Answer №1

To target elements based on their attribute, you can utilize the attribute selector in CSS.

.project-panel .pp-thumb img {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 170px;
  height: 127px;
}

.project-panel .pp-thumb:hover img {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(http://couill.art/wp-content/uploads/2018/05/Thicc-Girls-thumb.gif) no-repeat;
  width: 170px;
  /* Width of new image */
  height: 127px;
  /* Height of new image */
  padding-left: 170px;
  background-size: contain;
}

a[title="Danger Zone"]:hover>img {
  background: red;
}

a[title="Danger II"]:hover>img {
  background: #00ff11;
}
<div class="pp-thumb column" data-xl-width="2" data-sm-width="4" data-xs-width="6">
  <a href="http://couill.art/project/danger-zone-duplicate-3" title="Danger Zone"><img src="http://couill.art/wp-content/uploads/2018/05/Thicc-Girls-thumb.png" width="200" height="150"></a>
  <p class="pp-title"><a data-font="font_dqju2lgtu" href="http://couill.art/project/danger-zone-duplicate-3" title="Danger Zone">Danger Zone</a><span data-font="font_dqju2lgtu">Animation</span></p>
</div>

<div class="pp-thumb column" data-xl-width="2" data-sm-width="4" data-xs-width="6">
  <a href="http://couill.art/project/danger-ii" title="Danger II"><img src="http://couill.art/wp-content/uploads/2018/05/chauve-souris-0-00-02-19.png" width="200" height="150"></a>
  <p class="pp-title"><a data-font="font_dqju2lgtu" href="http://couill.art/project/danger-ii" title="Danger II">Danger II</a><span data-font="font_dqju2lgtu">Animation</span></p>
</div>

Answer №2

To implement the desired effect, simply include the provided CSS code:

.pp-thumb a[title="Risky Business"]:hover {
  color: red;
}
.pp-thumb a[title="Warning Signs"]:hover {
  color: yellow;
}

For a live demonstration, feel free to visit this fiddle https://jsfiddle.net/qh8fmj1k/

Answer №3

Have you thought about organizing your img elements by assigning them unique ids and then utilizing those ids in your CSS?

<img id="category1" src="http://couill.art/wp-content/uploads/2018/05/Thicc-Girls-thumb.png" width="200" height="150"></a>


<img id="category2" src="http://couill.art/wp-content/uploads/2018/05/chauve-souris-0-00-02-19.png" width="200" height="150"></a>

You can now refer to these IDs in your CSS selectors:

.project-panel .pp-thumb #category1{

}
.project-panel .pp-thumb #category2{

}

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

The positioning of absolute CSS elements is causing alignment issues with their adjacent siblings

I am currently developing a customized Tooltip component using React that can be rendered to the right or below the target element. In my approach, the Tooltip component takes children as input and displays them. When these children are hovered over, the t ...

cssreactjssassflexboxcss-position

When using Websocket, an error message stating "Invalid frame header" will be triggered if a close message of 130 or more characters is sent

I am utilizing the ws node.js module along with html5's WebSocket. The Websocket connection is established when a user triggers an import action, and it terminates once the import is completed successfully or encounters an error. At times, the error ...

javascriptnode.jshtmlwebsocket

Having trouble with clicking on an icon link within a list

Seeking assistance with creating a social media icon/link list for the first time on this platform. Any help is appreciated! <div class="social-links"> <ul> <li class="m-link"> <a href="&q ...

htmlcsshovericons

the eventListener is not functioning as expected when used with the 'else' keyword

Everything seems to be working fine until I click on playsong1. The code executes as expected for the first click, but when clicked again, instead of progressing to the conditions after the } else { statement, it re-triggers the same conditions (replayin ...

javascripthtmlcss

Web page glitch repaired: Top fixed div now functioning properly

I am currently facing an issue with a fixed header and full-screen background image. The problem arises when I try to display an alert on top of the page, pushing down the header and hero section. However, I am encountering difficulties as the alert eith ...

htmlcss

Can the content inside HTML tags be susceptible to XSS attacks?

While working with Codeigniter, I have noticed that the xss_clean() function is replacing tab characters with a single space character. This behavior ends up causing issues when the content is later displayed within <pre><code></code>< ...

htmlcodeigniterxss

HTML form not compatible with POST method in MVC

Why doesn't the $.post() method work in this case? I have tried pressing the button but it doesn't seem to post to EditClassLessonHour. This is the corresponding View Code: <div class="jumbotron"> <form id="editClassLessonHour"> ...

htmlasp.net-mvcpost

Combining Content on a GitHub Page

Within the <head> section of my index.html, I have successfully utilized these links on localhost: <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <link href=&apos ...

htmlcssgithub-pages

Expanding Images in Bootstrap 4 Carousel

I am encountering some difficulties with a basic carousel implemented using Bootstrap 4. The carousel contains 3 images with the class d-block w-100, which is supposed to make the images stretch to the full width of the screen. However, in my case, the ima ...

htmlcssbootstrap-4carousel

The jQuery div enclosure technique

I am trying to wrap HTML around an existing div, here is what I have attempted: HTML: <input type="text" data-placeholder="username" /> It should look like this when rendered: <div class="placeholding-input"> <input type="text" data-pl ...

javascriptjqueryhtmlcss

"Exploring the Relationship Between Parent and Child Elements in CSS

Is it possible for an id to act as a parent in CSS? For instance: <div id="link"> <a href="www.example.com"></a> </div> The CSS code: #link > a{ /* style would be applied here*/ } Can this actually be achieved? ...

htmlcss

iOS is causing issues with the JavaScript function and not allowing it to

By creating an NSString that contains JavaScript, I am able to set the e-mail body. NSString * someString =@"<!DOCTYPE html>\n <html>\n <body> \n <h1>My Web Page</h1> \n <p ...

javascripthtmlobjective-ciosmfmailcomposeviewcontroller

Generating Unique Random DIV IDs with JavaScript

Does anyone know of a JavaScript solution to generate unique random DIV IDs? I am currently using PHP for this purpose. <?php function getRandomWord($len = 10) { $word = array_merge(range('a', 'z'), range('A', &apos ...

javascriptphpjqueryhtmlcss

Creating a transparent background for Font Awesome icons

My current project involves using icons sourced from Font Awesome's CDN. Interestingly, I have run into an issue where the icons are displaying with a white background. This became apparent when I applied the 'shadow' effect from Bootstrap ...

htmltwitter-bootstrapbootstrap-4font-awesome

Tips for creating a responsive div that contains both an image and description, including automatically resizing the image to fit the

#content { background-color: #ACAE4C; float: right; display: inline-block; padding: 0; } <div id="content"> <div class="pic"></div> <div class="desc"></div> </div> I need assistan ...

htmlcssresponsive-design

Apply a distinct background color to every third list item following the first three list items

I have used CSS flex and width to design a list, and now I want to apply background colors to every 3 list items after the 3rd item. However, I would like the colors to appear in pairs of 2. I have attempted to achieve this using the CSS Pseudo Class :nth- ...

htmlcss

What is the best way to toggle text visibility with a button click and what alternative method can be used if getElement does not work?

After successfully completing the HTML and CSS part, I hit a roadblock with JavaScript. I'm struggling to figure out how to create a button that can toggle the visibility of text when clicked. An error message keeps popping up in the console stating ...

javascripthtmlcssbutton

Converting a Selenium By object into a CSS selector: A step-by-step guide

When working with Selenium WebDriver, it's a common practice to find elements using the By class. Currently, I'm using a ByChained selector and I'm curious if there's a way to convert a By object to a CSS selector. For instance: By sel ...

cssseleniumselenium-webdrivercss-selectorsbrowser-automation

Struggling to make the CSS :not() selector function correctly as needed

I've been struggling to make the CSS :not() selector work in a specific way and despite searching for solutions, I haven't been successful. I came across some helpful resources like this page, but I couldn't figure it out on my own. Hopefull ...

htmlcss

Building a python table from scratch

Asking a user to go through a series of questions and answer them, with their answers being written to a file named mydoc.doc on the user's desktop. Currently facing an issue in Python where I need to create a table that generates the same number of r ...

pythonhtmllisttuples