How to change specific element in a class?

javascript change class style
javascript change css class property
get element by class
javascript replace class with another
javascript add class to element
jquery change class
remove class javascript
dynamically change css class with javascript

I would like to edit a specific attribute from a class in css/JS/JQuery on hover of a different element, but I'm not sure how to do it eg.

<h1 class="result">Lorium</h1>
<h1 class="result">Ipsum</h1>
<h1 class="result">Dolor</h1>
<img src="example.png" class="images"/>
<img src="example.png" class="images"/>
<img src="example.png" class="images"/>

so that when I hover on one of the <h1> tags, it will change the src of the <img>, but the rest will stay the same. Would I do this in CSS, JS or JQuery? How?

Note: they have to be classes, rather than id's, because I am using PHP to call all these elements and they have to be styled

thanks,

a tired programmer


Firstly you need to detect the hover / mouseenter on the H1 element with the class result.

I am going to assume that all your results have the class result.

$('.result:eq(0)').mouseenter(function(){
console.log("hello world");
});

Next you need to change the img src associated with the result - again I am going to assume all your imgs have the same class.

$('.result:eq(0)').mouseenter(function(){
    $('.images:eq(0)').attr('src','https://via.placeholder.com/150x150')
});

I would suggest you to write a function so that you are not having to hardcode the nth value of the class selector.

Further reading: https://api.jquery.com/eq-selector/

If you are not using jQuery - similar logic but you will use document.querySelector('.result')[0] etc.

Further reading: http://mdn.beonex.com/en/DOM/Element.querySelectorAll.html

EDIT -- For nth value where n is the same index number for both result and images

$('.result').mouseenter(function(){
    var nValue = $(this).index();
    $('.images:eq('+nValue+')').attr('src','https://via.placeholder.com/150x150')
});

How can I change an element's class with JavaScript?, The class name is used as a selector in HTML which helps to give some value to the element attributes. The document.getElementById() method is used to  When styling specific elements with CSS, it is helpful to visualize the HTML code as a family tree with parents, children, and siblings. In the following code example, the tree starts with the html element, which has two children head and body. The head has a child element called title. The body has h1, ul, and p elements as children.


First of all, the structure of your HTML does not seem really scalable. I wouldn't count on order of elements. I would instead rewrite the HTML into something as the following:

<div class="result-container">
  <h1 class="result">Result title</h1>
  <img src="something.png" class="image" />
</div>

And then to handle events using jQuery, you can do something as follows:

function onHoverIn() {
  const resultTitle = $(this);
  const image = $(this).parent().find('.image')[0];

  image.attr('src', 'something-hovered.png');
}

function onHoverOut() {
  // same logic
}

$('.result-container .result').hover(onHoverIn, onHoverOut);

Hope that helps!

Change an element class JavaScript, However, when accessing multiple elements by a common selector, such as a specific class, we have to loop through all the elements in the list  To calculate c, count the number of other attributes and pseudo-classes in the selector. To calculate d, count the number of element names and pseudo-elements in the selector.


In jQuery, typically you can change an image like this:

$(".images").attr("src","second.jpg");

But as you can see, because all the images have same class you probably won't achieve what you are looking for. You need something to differentiate images from each other if you are looking to map them to the header tags.

Since you have multiple, you are probably looking at something like:

$('.images').each(function() {
    //count the index and flip the image
});

How To Modify Attributes, Classes, and Styles in the DOM , The className property sets or returns the class name of an element (the If there's a class of "mystyle" in an element with id="myDIV", change its font-size:. A comma in a selector means to select both, so in your example you're matching both elements with the class "intro" and ALL spans on the page. To target an element that is the child of another you simply put a space between the two:.


HTML DOM className Property, Toggle between adding a class name to the div element with id="myDIV" (in this example we use a button to toggle the class name). Example. <button onclick="  3 Answers3. Without the descendant combinator, your selector will match an element with an ID of form2 and a class of formlegend. According to the markup in your question, you need it to match an element with the class formlegend that is a descendant of an element with an ID of form2. Indeed space was only issue.


How To Toggle Between Class Names, How to Change Element Class with JavaScript. The class attribute can be used by JavaScript (via the HTML DOM) to modify HTML elements with a defined class​  The third way is similar to the [] operator in the sense you can screw things up. A vector just like an array is a sequence of continuous memory blocks containing data of the same type. This means that you can use your starting address by assigning it to an iterator and then just add an offset to this iterator. The offset simply stands for how


How to Change Element Class with JavaScript, cName is a string variable representing the class or space-separated classes of the current element. Example. let el = document.getElementById('  Fullscreen Video Modal Boxes Delete Modal Timeline Scroll Indicator Progress Bars Skill Bar Range Sliders Tooltips Display Element Hover Popups Collapsible Calendar HTML Includes To Do List Loaders Star Rating User Rating Overlay Effect Contact Chips Cards Flip Card Profile Card Product Card Alerts Callout Notes Labels Circles Style HR Coupon