My issue is that while the a tag is in the container the ":hover +" does not work. If I move the a tag outside the container it works fine. Using a basic div instead of the bootstrap container produces the correct result. Is there something that blocks this from happening in the bootstrap libraries?
HTML :
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-8">
test
</div>
<div class="col-sm-4">
<div class="info">
<h1>Info</h1>
<div class="info-box">
<div class="one">one</div>
<div class="two">two</div>
</div>
</div>
</div>
</div>
</div>
</body>
CSS :
.
info{
text-align:center;
}
.info-box{
width: 70%;
height: 300px;
border: 1px solid red;
margin: 0 auto;
}
.one, .two{
display: none;
}
a:hover .container
> .row > .col-sm-4
> .info > .info-box
>.one{
display: block;
}
Codepen
Because the element that you want to show when you hover over the tag is NOT a child of the element your are hovering over, it's not going to be possible to target the element via CSS.
Your best bet is to use some very simple javascript/jquery.
Since you are using Bootstrap, I'm going to assume you are loading jQuery.
Here's a codepen: http://codepen.io/anon/pen/WrMPXY
$(document).ready(function(){
$('.test').hover(function() {
$('.one').toggle();
});
});
Let's look at what the jQuery is doing. The first line simply says "when the page is loaded, do this..."
In the second line, we start by grabbing the element with a class of "test". You could also target something with an id using $('#test'). Now that we have that element, we want to tell it to do something when we hover over it.
The third line starts with the element we want to do something with, in this case the element with a class of "one". The "toggle" function is a simple shortcut to hide/show. You also could use the hide() function, show() function, or fun things like slideUp(), slideDown(), or slideToggle().
That's it. Let me know if you have anymore questions regarding the jQuery. I have no idea how familiar you are with it so I apologize if this is all obvious.
The only CSS you need is a default state of "display:none;" on the elements you want to hide and show via jQuery.
If you looking for only css solution, you have to col-sm-8:hover
.col-sm-8:hover + .col-sm-4 > .info > .info-box > .one {
display: block;
}
in this case you might reduce width of col-sm-8 block. I just added float to this class, you can have another solution!
.col-sm-8 {
float: left;
}
jsfiddle-link
Related
I'm trying to remove the margin-left on http://insightcxo.com/epicwin/
The problem is when I target the class .container, it shifts the whole website over - I only want to target the div on the specific page.
This is the code I'm using that makes the page work but shifts the whole website over as well:
.container {
margin-left: 0;
}
Most WordPress themes (including yours) include the page ID as a body class name. In this case, the <body> tag looks like the following:
<body class="page page-id-731 page-template-default page-shadow responsive-fluid ">
This means that you can target this page via:
.page-id-731 .container {
margin-left: 0;
}
More about WordPress's body_class() function can be found in the Codex.
As per the page you are linking, it seems you are using an page-id as a class in your body, so this might work:
.page-id-731 .container {
margin-left: 0;
}
I am not sure if I understand completely, but I think what you need to do is add an id to the div you want to target.
Here is a JSFiddle of what I mean:
https://jsfiddle.net/dT9Yk/25/
HTML:
<div class="div1"></div><br>
<div class="div1" id="marginleft"></div><br>
<div class="div1"></div><br>
CSS:
.div1 {
width: 100%;
height: 50px;
background: red;
}
#marginleft{
margin-left:10%;
}
As you can see they all have the same class name but the middle one has an additional id tag.
Add a class to the body on that page only and then use specificity to target the container on only that page. For instance, add body class epicwin on that page and then use
.epicwin .container {
margin-left:0;
}
to target it.
Adding margin-left: 0px; to your CSS file is conflicting with the default .container class of bootstrap.
To fix your issue apply the class directly inline, it will solve your issue, like so:
<div class="container" style="margin-left: 0px;">
You can create something like this in the stylesheet you are using:
.Container_Div { padding: 0px 0px 0px 0px;}
Add this to your HTML:
div class="Container_Div"
Try this and let me know.
You can target a div with class/id .you can target directly or with reference of parents div class/id as follow.
<div class="parent">
<div class="child"></div>
</div>
direct target
.child{}
with reference to parent div .It will only apply style to class/id that exist in parent with specific id/class
.parent .class{
}
I am a newbie to bootstrap. I have developed a weppage using bootstrap3. I'm using these two classes on the same element, but the css is not having any effect:
HTML:
<div class="col-md-4 auminascroll">
dfgdgdfgdfgsdfgh cxzvdzfhfdbfd fbfddf
</div>
<div class="col-md-4 auminascroll">fghfdghfdhdfhfdsh</div>
<div class="col-md-4 auminascroll">dfgdsgdsfg</div>
Css:
.col-md-4 .auminascroll {
height: 50px;
overflow-y: auto;
}
I am not getting a scroll when using above code. If I put height: 50px; overflow-y: auto; in a style tag, my code works fine. Why is this css not having an effect when using it with this bootstrap class? Is there any problem with my code?
Any help will be greatly appreciated!!!
You're nearly there! When using a selector to choose two classes there should be no space between the class names - they just need separating with a dot.
.col-md-4.auminascroll { /* no space between the two classes */
height: 50px;
overflow-y: auto;
}
Your code (where there's a space between the two classes: .class-a .class-b would actually look for an element of class-b inside and element of class-a.
<div class="col-md-4">
<div class="auminascroll">
</div>
</div>
You are using the wrong css selector. You need to use it like:
.col-md-4.auminascroll {
height: 50px;
overflow-y: auto;
}
I have a division placed on the bottom of the page. I put an image into this division, but I don't know how to modify the image. The problem may be, that the inline style for <img> is setting modification rules for all images. I have an inline style sheet that has this code and HTML code for <div>.
My CSS code looks like this:
<style type="text/css">
img {
image-align: center;
padding: 10px;
height: 200px;
width: 140px;
}
div {
position: absolute;
right: 10px;
}
</style>
And my HTML code is like that:
<div align="center" >
<img src="images/music_banner.jpg" >
</div>
you can do this:
div img{
}
or give the div a name and do this
#div img{
}
or you give the img an id as below
<div>
<img id="mg"/>
</div>
Use id as #mg in CSS code.
or you can do as define class name in img tag.
<div>
<img class="mg"/>
</div>
Use class as .mg in CSS Code.
You might try learning a little bit more about CSS selectors: these are the rules that tell the browser which element you'd like to apply the following rules to.
I would recommend Code Academy for an easy to follow course. You can skip down to the CSS section if you are already comfortable with HTML.
Note: if you google CSS, you'll get "w3schools" as the first results. That website is generally derided on Stack Overflow. I don't know if it's really that bad, but I tend to skip it just because everyone else has a bad opinion of it. Your call if you find it helpful of course.
I should note that I like to use the W3C (World Wide Web Consortium) website for reference, as they're the ones trying to make everything standard. It is a pretty technical read, though.
Create a div element in your HTML code:
<div class="parent">
<img src="image">
</div>
Than add this to your CSS code:
.parent {
width: 42px; /* I took the width from your post and placed it in css */
height: 42px;
}
/* This will style any <img> element in .parent div */
.parent img {
height: 100%;
width: 100%;
}
I have some links, and each of these have a unique href.
lets say link one have href="#first".
and link two have href="#second".
What would then be the CSS to do something with a div? (with the ID box)
I have tried lots of things like:
#first:target #box{
something..
}
#second:target #box{
something else..
}
#linkOne:hover #box{ width:200px; }
This changes the size of #box by hovering #linkOne I want the same to happen with :target, like change the size of #box by clicking the link
If you want to select the currently targeted element, you can simply do :target
html
first link
second link
<div id="first">first div</div>
<div id="second">second div</div>
css
:target {
border: 1px solid red;
}
The div with the corresponding id of the link clicked will have a red border.
http://jsfiddle.net/wk3rR/2/
UPDATE
Judging by your comment, it appears you want to manipulate the same box with different current targets, which won't be straight-forward, but can be done if you nest the <div>s with the IDs and then your original css should work:
first link
second link
<div id="first">
<div id="second">
<div class="box">box</div>
</div>
</div>
css
#first:target .box {
border: 1px solid red;
}
#second:target .box {
border: 1px solid yellow;
}
http://jsfiddle.net/wk3rR/3/
If I am not wrong, you are looking for something like the below. This will set the height of the currently targeted element to 20px. Transition effect will also be applied.
HTML:
<a href='#first'>First</a>
<a href='#second'>Second</a>
<div id='first'>This is first div</div>
<div id='second'>This is second div</div>
CSS:
#first, #second {
height: 0px;
overflow: hidden;
transition: height 1s ease-in;
}
#first:target {
height: 20px;
}
#second:target {
height: 20px;
}
Demo Fiddle
EDIT: I know you haven't tagged jQuery/JavaScript and was looking for a CSS solution. But if you have many such links and are ok to have a JS based solution, you can try the below.
This script has a mapping between the id of the link that is clicked and the height that the box is supposed to have when the link is clicked. Based on it, the #box element's height is modified. Transitions will also work as can be seen in this fiddle.
window.onload = function () {
document.getElementsByTagName('body')[0].onclick = function(e){
var box = document.getElementById('box');
var heights = { first: '20px', second: '40px', third: '30px' };
if(e.target.id)
box.style.height = heights[e.target.id];
};
}
I think you need the use of javascript if you want manipulate DOM. You have to remember CSS is only for style the page, not for making actions with the elements.
Trying to change a div background color when hover over another div. But I can't get it to worked. Been seing aroud her now, but can't find a similair question.
<style type="text/css">
#main {
width: 960px;
height: 600px;
margin: auto;
position: relative;
background: red;
}
#trykk {
width: 100px;
height: 100px;
background-color: yellow;
}
#trykk:hover #main {
background-color: green;
}
</style>
<div id="main">
<div id="trykk">
</div>
</div>
Thats the code I've been using. The only problem is that I'm not allowed to use javascript. So is there any way I can change background color on div #main when I hover over div #trykk?
A demo related to Rodik's answer, as he said you cannot change select parent using a child hence you cannot change the style of parent element, but if you want you can change your markup, as you said you cannot use javascript but if you can change the markup than it will go like this
Demo1
HTML
<div id="main">Main</div>
<div id="trykk">Trykk</div>
CSS
#main:hover + #trykk {
background-color: green;
}
Or if you want to nest your div's as you are doing right now, just change the selector like this
Demo2
HTML
<div id="main">Main
<div id="trykk">Trykk</div>
</div>
CSS
#main:hover > #trykk {
background-color: green;
}
CSS selection only works one way, from parent to child.
A child's state, hence, cannot affect it's parent's state.
A javascript mouseover event will be needed to implement this type of functionality.
with jquery you could do this:
$(function(){
$("#trykk").hover(function(){
$("#main").toggleClass("greenBackground");
});
});