48581

Change multiple background-images with jQuery

In my css page, i have this as code:

header { background:url('afbeeldingen/r.png'),url('Afbeeldingen/black.jpg'); background-position: 50% 33%, left top; background-repeat: no-repeat, no-repeat; background-size:26%,960px 130px; margin-left:auto; margin-right:auto; }

Now in my html page, I want to use JQuery to change the first image when I hover my navigation bar. Can you please help me?

Answer1:

Use class header to your navigation button wherever you want to do this work

.header { background:url('afbeeldingen/r.png'),url('Afbeeldingen/black.jpg'); background-position: 50% 33%, left top; background-repeat: no-repeat, no-repeat; background-size:26%,960px 130px; margin-left:auto; margin-right:auto; } <script> $(".header").hover(function(){ $(this).css("background","url('Afbeeldingen/black.jpg'),url('Afbeeldingen/anotherhoverimage.jpg')"); }); $(".header").mouseout(function(){ $(this).css("background","url('afbeeldingen/r.png'),url('Afbeeldingen/black.jpg')"); }); </script>

Answer2:

There is no current native method in jQuery to switch out the order of the background images (and hence the one that is displayed). Here's the code to swap the background image order for an element with two background images by parsing the links and swapping them:

var bg=$(this).css('background-image').split('),url('); if(bg.length==2) $(this).css('background-image','url('+bg[1]+','+bg[0]+')');

Recommend

  • JQuery Add class to certain list item
  • How to set the navigation bar to the top in Table View?
  • Base Internationalization and “Could not find a storyboard named […]”
  • QPushButton is not changing the background-color proper
  • jQueryMobile, Ajax Navigation, and MVC
  • How do you remove the JComboBox 'click and see dropdown' functionality?
  • Pass array from parent template to child template
  • cell spacing in div table
  • chrome video src change not working
  • Primefaces :radioButton inside a ui:repeat
  • Hibernate to update table schema
  • Floated image with variable width and heading with background image
  • Ajax Upload File: $_FILES is empty but files exists in request header
  • Adjust width of select element according to selected option's width
  • Installed module is empty
  • how to display data from 1st point on words on y axis for line chart in d3.js
  • Jackson Parser: ignore deserializing for type mismatch
  • chrome.tabs.executeScript only fires when the Developer Console is open
  • Time complexity of a program which involves multiple variables
  • Custom validator control occupying space even though display set to dynamic
  • Listbox within Listbox and scrolling trouble in Windows Phone 7 Silverlight
  • Atlas images wrong size on iPad iOS 9
  • Can I check if a recipient has an automatic reply before I send an email?
  • Algorithm for a smudge tool?
  • Android screen density dpi vs ppi
  • Align navbar back button on right side
  • Can Jackson SerializationFeature be overridden per field or class?
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • Window Size for Mac application
  • DirectX11 ClearRenderTargetViewback with transparent buffer?
  • Sending data from AppleScript to FileMaker records
  • Trying to switch camera back to front but getting exception
  • Change an a tag attribute in JavaScript based on screen width
  • VB.net deserialize, JSON Conversion from type 'Dictionary(Of String,Object)' to type '
  • How to get icons for entities from eclipse?
  • Android Studio and gradle
  • Proper way to use connect-multiparty with express.js?
  • Load html files in TinyMce
  • JaxB to read class hierarchy
  • How to push additional view controllers onto NavigationController but keep the TabBar?