jquery - CSS background-position change on Y-Axis only -


OK ... so here's the problem.

I have a CSS phantom image, ten (10) 25px x 25px icons exit horizontally - thus a phantom image of 250px width is generated.

I am using these 25x25 images as thumbnails I have the opacity of 30% in the INITIAL view in these images and when a user hovers over them, the ambiguity is 100% (1) the wanted.

So what I did was the line of images with my own ambiguity at 30% - so now I have a phantom image of 250px x 50px. 25px at top 100% and below 25px 30%.

I have setup HTML as follows: 

  & lt; A href = "bigimage1.jpg" class = "thumb1" & gt; & Lt; / A & gt; & Lt; A href = "bigimage2.jpg" square = "thumb 1" & gt; & Lt; / A & gt; & Lt; A href = "bigimage2.jpg" square = "thumb 1" & gt; & Lt; / A & gt; Etc ...

and CSS: 

  a {display: block; Swim left; Width: 25px; Height: 25px; Background: URL ("250_x_50_spriteimage.jpg") 0 -25px no-repeat; }. Thumb1 {background-position: 0 0; }. Thumb2 {background-position: -25px 0; }. Thumb 3 {background-position: -50px 0; } A: Hover {** background-position-y **: -25px; }

However, it does not work unfortunately, because background-position-W is not supported in Firefox (or not standard, but it is IE-specific).

The idea is that we want to shifat (only) the sprite image UP (with the Y-axis) and leave the x-axis (or set in the previous class).

If there is no simple CSS solution on this - can this ambiguity effect be done with JQUERY?

Many thanks,

M.

So thumb is loaded at 30% opacity and 100% is ambiguous infection?

You do not need to set a second icon to get the desired effect, and neither Javascript is used.

As told by Lo, use opacity to make your mouse 30% or completely visible, messing with background-condition There is no need for that.

Just go ahead and define your style according to: 

  a {opacity: 0.3; / * Standard / Browser for filter: Alpha (Opacity = 30); / * IE * / display: block; Swim left; Width: 25px; Height: 25px; Background: URL ("250_x_50_spriteimage.jpg") 0 -25px no-repeat; } A: Hover {Opacity: 1.0 Filters: Alpha (Opacity = 100); }. Thumb1 {background-position: 0 0; }. Thumb2 {background-position: -25px 0; }. Thumb 3 {background-position: -50px 0; }

If you are concerned about the validity of your CSS code, then take IE-specific parts (which will not be valid) and put them in specially targeted CSS files.

Hope that helps.


Comments

Post a Comment

Popular posts from this blog

python - Overriding the save method in Django ModelForm -

I'm having trouble overriding a ModelForm save method. I get this error I'm: Exception type: TypeErier Exception Value: Save () found an unexpected keyword argument 'committed' My intentions include a form 3 fields Submit several values ​​for, then create an object for each combination of those areas, and to save each object file models.py class collarsult type (models.Model): id = model. AutoField (db_column = 'icontact_result_code_type_id', primary_key = true) callResult = models.ForeignKey ( 'CallResult', db_column = 'icontact_result_code_id') campaign = models.ForeignKey ( 'campaign', db_column = 'icampaign_id') CALLTYPE = models.ForeignKey ( 'CALLTYPE', db_column = 'icall_type_id') agent = models.BooleanField (db_column = 'bagent', default = true) teamLeader = models.BooleanField (db_column = 'bTeamLeader', default = true) active = models.BooleanField (db_column = Django.form...
Read more

html - CSS autoheight, but fit content to height of div -

I have a div in which there are three children- div in the left and middle div: float: left while true: float: true because it is my layout Actually will spoil, I've used ClearFix Hack: .cf {zoom: 1; }. Cf: First,. Cf: {content: ""; Display: Table; }. Cf: After {clear: both; } It still works, but I want to be the right div an indicator. So it should fill 100% of the parent unit of height. How can I complete this? PS is the full code: & Lt; / Div & gt; & Lt; Div class = "mobile_content" & gt; & Lt; H5 & gt; {{Data.titel}} & lt; / H5> & Lt; Table & gt; & Lt; TR & gt; & Lt; Th & gt; Komponist: & lt; / Th & gt; & Lt; TD & gt; {{Data.komponist}} & lt; / TD & gt; & Lt; / TR & gt; & Lt; TR & gt; & Lt; Th & gt; Instrument: & lt; / Th & gt; & Lt; TD & gt; {{Data.instrumente}} & lt; / TD & gt; & Lt; / TR & gt;...
Read more

qt - How to prevent QAudioInput from automatically boosting the master volume to 100%? -

I have been trying to use Qt5 multimedia to record audio with QAudioInput, however, when I see If QAudioInput is started, it increases the master volume of my sound device to 100%. How can I prevent QAudioInput from changing the master volume? My current development platform is Linux with PalsAdio (with flat audio disabled). How can I use QAudioInput : QAudioDeviceInfo device_info = QAudioDeviceInfo :: defaultInputDevice (); QAudio format format; Format.setSampleRate (44100); Format.setChannelCount (1); Format.setSampleSize (16); Format.setCodec ("Audio / PCM"); Format.setSampleType (QAudioFormat :: SignedInt); Format.setByteOrder (QAudioFormat :: LittleEndian); Std :: cout & lt; & Lt; Device_info.deviceName (). ToUtf8 (). ConstData () & lt; & Lt; Std :: endl; QAudioInput * default_device = new QAudioInput (device_info, format); QIODevice * default_io_device = default_device-> Start (); a QAudioInput.setVolume () method is not you I ...
Read more