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.
Related
I have my profile image and below it I want to place my name and a few things about me. I don't know what to use for the image div or if I even need a div for it. Are the h1 and p elements used properly?
Snippet
<div class="profile">
<div><img src="profile_image.jpg"></div>
<h1>first last</h1>
<p>Coffee snob.</p>
</div>
Full Body HTML
<body>
<div class="page">
<div class="profile">
<div><img src="profile_image.jpg"></div>
<h1>first last</h1>
<p>Coffee snob.</p>
</div>
<div class="sites">
<ul>
<li><img src=""> <img src=""></li>
</ul>
</div>
</div>
</body>
The rest of the site are just app icons taking to my social media sites. There's no other content. My site also doesn't have a header or footer. Not sure if my profile class should be considered the header at this point for good SEO.
You do not need to put the div around the image. Just style it to display: block (img defaults to display: inline)
<div class="profile">
<img style="display: block" src="profile_image.jpg">
<h1>first last</h1>
<p>Coffee snob.</p>
</div>
Otherwise, the rest of the code is perfectly fine.
It does depend of what exactly you want to do with it but if I understand your question.
You don't need divs for your image just set up different image classes in your CSS.
.image1
{
width:100px;
height:100px;
}
Then your HTML would look like
<img src="profile_image.jpg" class="image1">
Check out http://www.w3schools.com/css/css_align.asp for more information about how to actually set up alignments in your CSS
It might be worth using a div to style your text into a block or format it to look nice, etc. But you don't need to do it
http://www.w3schools.com/tags/tag_div.asp for div styling .
And finally abit of personal experience, spend an hour or 2 looking through W3Schools CSS section and learning the basics of styling it's a great way to learn the basic tools you need to work with CSS and make your pages look good !
Edit styling text
<h1>first last</h1>
<p>Coffee snob.</p>
so first you could style them in your css as the elements they are
h1
{
text-align:left;
padding-left: 10px;
text-decoration: underline;
}
p
{
text-align: right;
}
Doing thing your HTML would look exactly as it is you wouldn't have to change anything. Obviously this is something you can only do once for all <p> and <h1> content and every time you use those tags without specifying a class for them it'll look exactly like whatever the above CSS is.
The other option is to do what I suggested with the image and give them a unique class.
p.body
{
text-align: right;
}
Here you'll need to add class to <p> jsut like you did for image which will look like
<p class="body">Coffee snob.</p>
Hope that helps !
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!
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;}
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 have this html:
<div class="speaker-list">
<div class="view-content">
<div class="views-row views-row-1 views-row-odd views-row-first">
<div class="views-field views-field-title">
<span class="field-content">
Keith Anderson
</span>
</div>
<div class="views-field views-field-field-job-title">
<div class="field-content">VP, Digital Advisory</div>
</div>
<div class="views-field views-field-field-company">
<div class="field-content">RetailNet Group</div>
</div>
<div class="views-field views-field-title-1">
<span class="field-content">
Store of the Future
</span>
</div>
<div class="views-field views-field-field-headshot">
<div class="field-content">
<div id="file-53" class="file file-image file-image-jpeg contextual-links-region">
<div class="content">
<img typeof="foaf:Image" src="/kanderson.jpg" width="180" height="180" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
It's dynamically generated by a Drupal view, so I can't change the output html at all. I need to work with what is here. Here's the desired result:
Without any styling on the headshot, this is what it looks like:
I tried to style the image to force it to float to the left of the text:
.view-speaker-list div.view-content div.views-row div.views-field
div.field-content div.file-image div.content img {
border: 1px solid #666;
float: left;
position: relative; /* tried with and without position (inc. absolute) */
left: 30px;
}
Obviously I'm doing something wrong, because this is what I get (with relative position):
and with absolute position:
I've also tried putting the float on the "uppermost" div class that holds the image, with no position on the div:
.view-speaker-list div.view-content div.views-row
div.views-field-field-headshot {
float: left;
}
It gives the same result as the position: relative screenshot.
Where am I going wrong? If I had control over the html I'd do it differently, but I'm not sure how to deal with all of these nested divs.
EDITED TO ADD NEW SCREENSHOT FOR #WEX
Here's what it looks like when I tried to use your code with the html reordered - http://jsfiddle.net/mPa7z/
I'll try to explain the "right" way to use float so that you can see why your way didn't work.
In your post, you try to apply float: left to the <div> surrounding your image, but that technique only works when the element you are floating is above all the elements you want to wrap around it. That "may" solve your problem, but that technique has it's pitfalls if you're trying to use it to create two distinct columns - if the text on the right is taller than the floated element, the text on the right will wrap below it. So then you have to add another container around your non-floated elements to ensure that it won't wrap. This solves your problem, but doesn't really help if you can't even edit your markup!
I'd argue that the technique I've posted below works better, and solves your problem: http://jsfiddle.net/Wexcode/AQQwX/
.view-content {
position: relative;
min-height: 180px;
padding: 0 0 0 180px; }
.views-row { padding: 20px 0 0 20px; }
.views-field-field-headshot {
position: absolute;
top: 0;
left: 0; }
If you have access to the View itself in Drupal, you can reorder the elements. When logged into Drupal, open the View (in Drupal 7: Structure > Views > Viewname), look for "Fields" and click on the triangle next to "add", which will have a popup, then click "rearrange". You can then drag the photo field to be the first item in the View, then adjust your CSS to float the image to the left.
EmmyS,
Instead of trying to get the headshot to float:left, have you considered making the others float:right? This will give the impression that the image is floating left without having to change the markup in any way.
div.speaker-list div.views-row > div.views-field {
float:right;
clear:both;
}
div.speaker-list div.views-row > div.views-field.views-field-field-headshot {
float:none;
clear:none;
}
The above CSS should work with that specific configuration without altering any of your other Drupal generated markup. In order to make sure that other CSS does not interfere, I've applied as much specificity as possible. Since the headshot will be back in the containing <div>, you shouldn't need to alter the size of it unless the store is simply too large (I don't know without looking at your data). Finally the CSS is concise, so you can add any additional styling you need on a per-element basis.
Hope this helps,
FuzzicalLogic
When you can drop somewhere else on the page some code, you can gain control over the HTML by using jQuery. Then you could make modifications to the DOM tree.
But I do not understand why you can not edit the HTML. Isn't Drupal open source? You should be able to find the file using FTP and manipulate it.