I know this is a pretty newb question, but I cannot seem to find an answer to it via Googling. I am using the Chrome plugin StyleBot to alter the CSS of an internal tool used by the company I work for. So I only have access to editing CSS.
I am attempting to make it so when I hover a specific element on the page, it changes the background color to highlight the information. What I need to do is make it so that ONLY the .row element I am hovering changes. Currently the way I am doing this is changing ALL .row elements. Basically, with some back-end code they are generating a list, each item in the list is coded with this:
<span class="row">
<div class="boxy txtleft"><span title="Agent"></span></div>
<div class="boxy"><span title="Status"></span></div>
<div class="boxy txtright"><span title="Last Call"></span></div>
</span>
So in the live environment it looks some what like this and keeps repeating:
<span class="row">
<div class="boxy txtleft"><span title="Agent"></span></div>
<div class="boxy"><span title="Status"></span></div>
<div class="boxy txtright"><span title="Last Call"></span></div>
</span>
<span class="row">
<div class="boxy txtleft"><span title="Agent"></span></div>
<div class="boxy"><span title="Status"></span></div>
<div class="boxy txtright"><span title="Last Call"></span></div>
</span>
<span class="row">
<div class="boxy txtleft"><span title="Agent"></span></div>
<div class="boxy"><span title="Status"></span></div>
<div class="boxy txtright"><span title="Last Call"></span></div>
</span>
The CSS I am using to try and highlight a row when I hover it:
.row:hover {
background-color: red;
}
I know why this would alter all the .row elements, but I cannot figure out how to make it alter ONLY the one my mouse is over. Any help would be appreciated!
maybe you mean each single(descendant) element in row:
.row> *:hover {
background-color: red;
}
http://jsfiddle.net/maio/tyLayh3c/1/
Your current code does not highlight all the elements when one is hovered, it works like you think. Although, with the code you gave none of them will highlight since there is no size to the '.row' span's, they don't have any width or height for a background. So the following code worked for me:
.row span:hover {
background-color: red;
}
This selects the spans inside of the row and changes their bg colors.
http://jsfiddle.net/snoapps/2oha40h5/
EDIT:
maioman's response probably would be safer since you might add more elements to the .row that aren't span's, then their backgrounds wouldn't be highlighted. So .row> *:hover {} would work better then.
Answering my own question here. Thanks you guys for validating that code will indeed work. It is in fact a problem with the rest of the web page so I now need to go through and manually tell it to not apply a hover to nearly every other element. Thanks again everyone!
Related
I have an image, single character in a span (equal sign), and then a div where child elements are added/replaced via js.
However, I can't for the life of me figure out how to get it all aligned properly (fear I'm over thinking and complicating it.)
I'm using bootstrap's grid (row/col) system as well.
Something akin to...
<div class="container">
<div class="row">
<div class="col-lg-2 col-offset-lg-1">
<div class="response-part">
<img src="foo" />
<span class="opensans">=</span>
<div id="rp1" class="opensans inline" style="width: 50px;">
</div>
</div>
</div>
<div class="col-lg-2">
<div class="response-part">
<img src="foo" />
<span class="opensans">=</span>
<div id="rp2" class="opensans inline" style="width: 50px;">
<span class="opensans">X</span>
</div>
</div>
</div>
</div>
</div>
See jsfiddle
Wanting image centered middle along equal sign (vertical-align) as well as span within neighboring div (and the text in that span appearing just a few pixels off the bottom line.)
I saw this but none of the solutions are addressing the problem for me (I can only guess it is because of the third element and font, etc.)
UPDATE1: Edited sample html to correctly reflect the scenario in which the response-part.div is empty (initial state, possible transition state as user interacts with the page.) Updated fiddle
UPDATE2: I "fixed" the issue occurring with no child elements by adding an initial element in the initial html for the response-part, and then adding one back in when the user removes all other elements. A bit hackish, would appreciate a fix that didn't involve this workaround if possible. Updated fiddle
PS: I initially considered using bootstrap v4 (with flexbox support) but it is still alpha. Alternatively, I also looked into using FlexboxGrid, however I still need bootstrap for other features and FlexboxGrid uses similar classes ("row", etc) as bootstrap, which I assumed would cause name conflicts (if I included both in my project, eg: which "row" class would be used!)
Try using display: flex; on your response-part class. Something like this:
.response-part {
display: flex;
align-items: center;
}
I edited your fiddle. Take a look on it: https://jsfiddle.net/gusLnyyh/6/
I am facing very annoying problem.
I have 2 div's like bellow, first div is product image, and second one is overlay that should be shown when user hovers over product image.
It does work, but when image is hovered, overlay doesnt stop flickering.
I tried few "hacks" by setting opacity and nothing works.
<div class="product-container">
<div class="product-image"><img src="http://placehold.it/200x200">
<div class="overlay">PRICE</div>
</div>
URL is http://jsfiddle.net/MZ3eE/
I know JS could be used, but in this case i need pure CSS solution.
After looking at the new fiddle
you need to do this
.product-container:hover .overlay-box {
display: block;
}
instead of
.product-img-box:hover + .overlay-box {
display: block;
}
http://jsfiddle.net/avxLA/1/
Apply the :hover to the .product-image div instead of the img like so:
.product-image:hover .overlay {
display:block;
}
updated fiddle
For starters, there is an unclosed <div> there, so not quite sure how you want it. Anyway if you want it like this:
<div class="product-container">
<div class="product-image">
<img src="http://placehold.it/200x200">
<div class="overlay">PRICE</div>
</div>
</div>
then like others said :
.product-image:hover .overlay {display:block;}
will do fine. Otherwise if you want it like that(which makes more sense tbh):
<div class="product-container">
<div class="product-image"><img src="http://placehold.it/200x200"></div>
<div class="overlay">PRICE</div>
</div>
you should put it on the containers :hover like that :
.product-container:hover .overlay {display:block;}
I have a 3-column layout that works pretty well:
http://jsfiddle.net/nicorellius/YNyHW/7/
My goal is to add a pre-existing modular unit into the center div, the one with class two-inner. The markup is like so:
<html>
<head></head>
<body>
<div>
<div class="container">
<div class="one">
<div class="one-inner"></div>
</div>
<div class="two">
<div class="two-inner"></div>
</div>
<div class="three">
<div class="three-inner"></div>
</div>
</div>
</div>
</body>
</html>
The CSS can be seen in the fiddle. Part of the modular unit is actually built from some PHP where some data from a database is fetched and displayed. I have some arrays that I'm using for testing that mimic 6 entries and gives the modular unit a 2-wide by 3-tall box layout. My problem is that when I add this unit into the layout above, I get something like the test site below.
The markup for the modular unit is like so:
<section class="unit">
<section class="buttons margin-top-2em">
<div class="button-fixed-width">
<button type="button" class="<bootstrap-button>">button 1</button>
</div>
<div class="button-fixed-width">
<button type="button" class="<bootstrap-button>">button 2</button>
</div>
<div class="button-fixed-width">
<button type="button" class="<bootstrap-button>">button 3</button>
</div>
</section>
<div class="row">
<?php // loop through some arrays to get module unit ?>
</div>
</section>
I've tried various tweaks to try and get it up but the only thing that does it is making the heights of the outer classes one, two, and three close to zero.
Although I've tried changing heights and other bits to get it to fit, I'm still having trouble figuring out why that center div won't go up. What am I missing?
The CSS for the unit class is in the fiddle. On it's own, it works OK, and I have some breakpoints that collapse it down into a single column. I just cant get passed this part...
EDIT
After trying some ideas from #kozlovski5, I am able to get the divmoving up and down as I need. But there is something going on that is making me uneasy. I'm not too familiar with the display: table, display: table-cell layout so Im sure I'm missing something. For example, when I add text to the divs in question, either the classes one, two, or three, or the inner classes, the adjustments recommended by #kozlovski5 go away. So in other words if I don't use top: -37.5em; and just fill the divs with text, everything seems to work as it should. It's when I try to model the layout with bordered sections that I get the strange behavior.
I ended up going with floats instead. See test site above for final.
I applied:
div > .modular {
display: block;
}
This seems to solve the problem. Here is an updated jsFiddle. http://jsfiddle.net/YNyHW/4/
OP has provided a test case for his website, so my updated answer is:
.two-inner {
background-color: #cba;
border: 1px solid gray;
display: block;
width: 100%;
height: 100%;
position: relative;
top: -596px;
left: 0;
}
Ugghhh.. Another Edit
I think the whole display: table and div > div. { display: table-cell;} is causing this issue and instead of working on patches let's hit the problem head straigh on instead of working on fixes.
Just get rid of the display table etc. And use floats instead here is an example:
http://jsfiddle.net/YNyHW/6/
Hey guys I'm trying to implement Paper unfoding effect in a webpage of a wesite I'm developing. Im using the pfold jquery plugin, but I want a text to appear on hover and I did it many times but doesnt work. Here is my code:
HTML:
<div class="uc-container">
<div class="uc-initial-content">
<!--<img src="fm.png" alt="FM" /> -->
<img src="fm.png" alt="Fm" title="Fm" id="hoverFm">
<p class="textSponsor">92.7 BIG FM</p>
<span class="icon-eye"></span>
</div>
<div class="uc-final-content">
<img src="fm.png" alt="FM" />
<div class="title"><h4>FM</h4> </div>
<span class="icon-cancel"></span>
</div>
</div>
And This is the CSS For same:
#hoverFm .textSponsor{
position: relative;
margin-right: auto;
margin-left: auto;
visibility: hidden;
}
#hoverFm:hover .textSponsor{
visibility: visible;
}
When Im doing this the text just simply comes below my picture . I'm not getting where I'm going wrong. And when I'm creating a new div which contains only <img> and <p> tag then my image is getting small (I guess its because of the code I wrote for resizing and paper folding effect which is gettin hampered due to this and then also text on hover is not coming)
If you guys wanna see what actually I'm making :
The link to the demo site is: http://tympanus.net/Development/PFold/index3.html
and the code for same is available at link: http://tympanus.net/codrops/2012/10/17/pfold-paper-like-unfolding-effect/comment-page-2/#comment-450779
And the github link for code is: https://github.com/codrops/PFold
I tried it a lot to figure out but was unable so please help someone. It will really be appreciated. Thanks in Advance!!
#hoverFm:hover .textSponsor
This does never really happen, because .textSponsor is not a child of #hoverGM, it is a sibling. You need to use the next selector, which is +:
#hoverFm:hover + .textSponsor
You could also change the structure to
<div class="uc-initial-content" id="hoverFm">
<img src="fm.png" alt="Fm" title="Fm">
<p class="textSponsor">92.7 BIG FM</p>
Then your original selector would work because now it really is a child.
i've searched around and seen some examples of how this is done, but i don't really get it and tried all methods but none worked, so i would like to ask if anyone can show me, for my code below, how can i affect the tournytitle when the img is hovered?
<div id="upevents" class="righty">
<div>
<div class="tournytitle">
<div style="font-weight: bold;">Test 2 Hat</div>
<div style="color: #888888; font-size: 10px;">17 . 12 . 2011</div>
</div>
<img src="/images/tourny/jomjom2.jpg" />
</div>
<div>
<div class="tournytitle">
<div style="font-weight: bold;">Test 1 Hat</div>
<div style="color: #888888; font-size: 10px;">12 . 12 . 2011</div>
</div>
<img src="/images/tourny/bane5.jpg" />
</div>
</div>
how should i write my css code for this?
i tried something like
.upevents img:hover + #tournytitle { background-color: yellow; }
but doesn't seem to work.
help much apperciated
As mentioned, your .tournytitle class must be a child of the img your trying to roll over. Your code .upevents img:hover + #tournytitle { background-color: yellow; } is certainly close, you just need to figure out how to comply to the above rule. With this your saying that .tournytitle is an adjacent-child of img, which is not the case in your given code. Also, your class and id symbols are incorrect, watch out for that.
I managed to get your code working by switching .tournytitle and img so that the class is now the adjacent-sibling - http://jsfiddle.net/gmwjw/1/ - I realize this may not be the design your looking for, but its a start.
This may be helpful to you - http://meyerweb.com/eric/articles/webrev/200007a.html
The .tourneytitle must be a child of the img element for you to achieve this. This fiddle shows the way you can reveal your image by hovering over your .tournytitle: http://jsfiddle.net/fWxH3/203/
To get what you want, you would need to change your HTML so that somehow your tournytitle div is a child of your img tag. Maybe you can use span's inside of your image tag instead of using div's for everything.