I have a class rightband, which is inside of a message class. Sometimes, the parent <div class="message"> has an id subnote, sometimes - not. The code is below:
<div class="message">
<div class="rightband">
<img id="img-up" src="arrow-up.png")" />
<img id="img-down" src="arrow-down.png")" />
</div>
</div>
<div id="subnode" class="message">
<div class="rightband">
<img id="img-up" src="arrow-up.png")" />
<img id="img-down" src="arrow-down.png")" />
</div>
</div>
In my CSS, for particular reasons I need to have the child class rightband formatted to change on hover and not the parent class.
#img-up, #img-down {
display: none;
}
#subnode .rightband:hover #img-up {
display: block;
}
:not(#subnode) .rightband:hover #img-down {
display: block;
}
On .rightband:hover I need to show the #img-up when there is an id="subnode" in the parent and show #img-down when the parent does not have the subnode.
Can this be done in CSS and how?
Try something like:
#img-up, #img-down {
display: none;
}
.rightband:hover #img-down {
display: block;
}
.rightband:hover #img-up {
display: none;
}
#subnode .rightband:hover #img-up {
display: block;
}
#subnode .rightband:hover #img-down {
display: none;
}
Related
I would like to organize the layout of a report (see link to image below) to use div elements instead of tables. How can I do that? I have the report converted into tables but I am not sure how to achieve the same look using div tags.
I have converted the report to html but it uses a table layout. I am not familiar with how to do the same using div tags. Any help would be appreciated.
Here is fiddle for the HTML/Table layout:
https://dotnetfiddle.net/xrbYXZ
Here is a link to the image of the report
layout of report
To achieve this with tags you can use CSS classes. Apply a class for "Table", "tRow", "tHead", "tCell". This is an example I found here: HTML-Cleaner.com
<html>
<h2>Phone numbers</h2>
<div class="rTable">
<div class="rTableRow">
<div class="rTableHead"><strong>Name</strong></div>
<div class="rTableHead"><span style="font-weight: bold;">Telephone</span></div>
<div class="rTableHead"> </div>
</div>
<div class="rTableRow">
<div class="rTableCell">John</div>
<div class="rTableCell">0123 456 785</div>
<div class="rTableCell"><img src="images/check.gif" alt="checked" /></div>
</div>
<div class="rTableRow">
<div class="rTableCell">Cassie</div>
<div class="rTableCell">9876 532 432</div>
<div class="rTableCell"><img src="images/check.gif" alt="checked" /></div>
</div>
</div>
</html>
For CSS style, at minimum:
.rTable { display: table; }
.rTableRow { display: table-row; }
.rTableHeading { display: table-header-group; }
.rTableBody { display: table-row-group; }
.rTableFoot { display: table-footer-group; }
.rTableCell, .rTableHead { display: table-cell; }
Additional CSS styling (for color and borders, etc.) - example:
.rTable {
display: table;
width: 100%;
}
.rTableRow {
display: table-row;
}
.rTableHeading {
display: table-header-group;
background-color: #ddd;
}
.rTableCell, .rTableHead {
display: table-cell;
padding: 3px 10px;
border: 1px solid #999999;
}
.rTableHeading {
display: table-header-group;
background-color: #ddd;
font-weight: bold;
}
.rTableFoot {
display: table-footer-group;
font-weight: bold;
background-color: #ddd;
}
.rTableBody {
display: table-row-group;
}
The same source has an HTML table "converter" worth trying.
I have the following issue.
In a demo part I have the code below:
<style>
.manImgA { display: none; }
.manImgB { display: none; }
.manImgC { display: none; }
.text.prijsa:hover ~ .manImgA { display: block; }
.text.prijsb:hover ~ .manImgB { display: block; }
.text.prijsc:hover ~ .manImgC { display: block; }
</style>
<div class="manImgA">
<img src="url-to-image-1">
</div>
<div class="manImgB">
<img src="url-to-image-2">
</div>
<div class="manImgC">
<img src="url-to-image-3">
</div>
<p class="text prijsa">Standard size</p>
<p class="text prijsb">Big size</p>
<p class="text prijsc">Very big size</p>
When you move the mouse cursor over one of the text paragraphs an image should appear. That will work if I replace the paragraphs above the code with the images.
But when I put in the structure like I showed above it doesn't work.
I tried to find answer online why it doesn't work... I post my question here because I didn't fine a clear answer.
Maybe this is what you are looking for?
Anyway siblings selector is for element that come after not before.
.manImgA { display: none; }
.manImgB { display: none; }
.manImgC { display: none; }
.text.prijsa:hover ~ .manImgA { display: block; }
.text.prijsb:hover ~ .manImgB { display: block; }
.text.prijsc:hover ~ .manImgC { display: block; }
<p class="text prijsa">Standard size</p>
<p class="text prijsb">Big size</p>
<p class="text prijsc">Very big size</p>
<div class="manImgA">
<img src="https://dummyimage.com/300x300/000/fff&text=ONE">
</div>
<div class="manImgB">
<img src="https://dummyimage.com/400x400/000/fff&text=TWO">
</div>
<div class="manImgC">
<img src="https://dummyimage.com/600x600/000/fff&text=THREE">
</div>
If you want only with pure css,you must change pure css:
.manImgA { display: none; }
.manImgB { display: none; }
.manImgC { display: none; }
.text:hover + div { display: block; }
<p class="text prijsa">Standard size</p>
<div class="manImgA">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQEnn9dYYZlciBKfaHCw17-dUgRPX3nq5_6-kV1ua-LIsId5g43uA">
</div>
<p class="text prijsb">Big size</p>
<div class="manImgB">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRDAYrQr9qgT2W00EV_CoCahFki3Vw4lSMNt81k9FCSTXoKT8TY2w">
</div>
<p class="text prijsc">Very big size</p>
<div class="manImgC">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSeY54SaYkaOxxyXlu_ng21EMIBZvJjnZBNQAOsIh_0_6Tvu9et">
</div>
The tilde ~ targets siblings which follow in the HTML markup order...
A ~ B = target B if and only if it follows A
To employ this feature of CSS in your example use something like this in your stylesheet...
/* hide all divs with a class
which begins with 'manImg' */
div[class^=manImg] {
display:none;
}
/* show div when p.prijs* element hovered */
p.prijsa:hover ~ div.manImgA,
p.prijsb:hover ~ div.manImgB,
p.prijsc:hover ~ div.manImgC {
display:block;
}
Hope that helped. :)
Hi i am having two divs with same classes and all in that i need to hide one div anchor tag.Here is the code for that
.tribe-section.tribe-section-taxonomy.contactus:nth-child(n) {
display: none;
}
<div class="tribe-section tribe-section-taxonomy">
Contact us
<h3>Event Categories</h3>
</div>
<div class="tribe-section tribe-section-taxonomy">
Contact us
<h3>Event Tgas</h3>
</div>
.tribe-section.tribe-section-taxonomy:nth-child(4n) > .contactus {
display: block !important;
}
.tribe-section.tribe-section-taxonomy:nth-child(4n+1) > .contactus {
display: none !important;
}
Why "zawartosc prawo" do not hide "zawartosc lewo"? on hover effect?
I try change class name, add ID, and another, but still do not work :(
Maybe I must try add some JS? But I think someone know how to do this.
Code
.zamieniamlewo {
display: none;
}
.prawo:hover ~ .zamieniamlewo {
display: block !important;
}
.lewo:hover ~ .prawo {
display: none;
}
.zamieniamprawo {
display: none;
}
.lewo:hover ~ .zamieniamprawo {
display: block !important;
}
.lewo {
background: red;
padding: 20px;
}
.prawo {
background: green;
padding: 20px;
}
<div class="lewo">
<h3>Zawartość lewo</h3>
</div>
<div class="prawo">
<h3>Zawartość prawo</h3>
</div>
<div class="zamieniamlewo">
<h3 class="imie">zamieniamlewo</h3>
</div>
<div class="zamieniamprawo">
<h3>zamieniam prawo</h3>
</div>
The ~ combinator separates two selectors and matches the second element only if it is preceded by the first, and both share a common parent.
for example:
.red ~ p{
color:red;
}
<p>i m not red</p>
<p class='red'>i m not red</p>
<p>i m red</p>
<p>i m red</p>
here the last two paragraphs match the sibling selector.
So in your code you can change something like
<div class="prawo">
<h3>Zawartość prawo</h3>
</div>
<div class="lewo">
<h3>Zawartość lewo</h3>
</div>
and add this in .css file
.prawo:hover ~ .lewo {
display:none;
}
I guess you need some thing like this , i have used jquery as it seems pretty straight forward to use when you usually deal with events
$(document).ready(function(){
$(".lewo").mouseenter(function(){
$(".prawo").hide();
});
$(".lewo").mouseleave(function(){
$(".prawo").show();
$(".lewo").show();
});
$(".prawo").mouseenter(function(){
$(".lewo").hide();
});
$(".prawo").mouseleave(function(){
$(".prawo").show();
$(".lewo").show();
});
});
.zamieniamlewo {
display: none;
}
.zamieniamprawo {
display: none;
}
.lewo:hover ~ .zamieniamprawo {
display: block !important;
background:white;
}
.prawo:hover ~ .zamieniamlewo {
display: block !important;
background: white;
}
.lewo {
background: red;
padding: 20px;
}
.prawo {
background: green;
padding: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="lewo">
<h3>Zawartość lewo</h3>
</div>
<div class="prawo">
<h3>Zawartość prawo</h3>
</div>
<div class="zamieniamlewo">
<h3 class="imie">zamieniamlewo</h3>
</div>
<div class="zamieniamprawo">
<h3>zamieniam prawo</h3>
</div>
I have a strange behavior in HTML + CSS: When I hover the picture it move a little (both in Chrome and ie 10). If the picture is in the top, it doesn't occuer.
This is very simple code, so I don't know what to do.
With this CSS:
div.effect img.image {
/*type your css here which you want to use for both*/
}
div:hover.effect img.image {
display: none;
}
div.effect img.hover {
display: none;
}
div:hover.effect img.hover {
display: block;
}
And this HTML:
<div class="effect" style="position: absolute; bottom:15px;right:135px;" title="Update from us">
<img class="image" src="http://www.w3schools.com/images/w3schoolslogoNEW310113.gif" />
<img class="image hover" src="http://www.w3schools.com/images/w3schoolslogoNEW310113.gif" />
</div>
You can see here in: http://jsfiddle.net/LmMSH/
Thanks in advance!
Add this to your css:
div.effect img.image {
/*type your css here which you want to use for both*/
display: block;
}
See it here: http://jsfiddle.net/LmMSH/2/
EDIT:
If you want to change pictures when user hover on div use this css:
img.image{
display: block;
}
img.hover{
display: none;
}
div.effect:hover img.image {
display: none;
}
div.effect:hover img.hover {
display:block;
}
http://jsfiddle.net/LmMSH/11/
Try this:
div.effect img.image {
float: left;
}
Give this CSS too
div{height:60px}