CSS Change Border Color on Hover

Use the :hover psuedo selector:

.box:hover {
   border-color: purple;
}

bootstrap card change border color on hover

I'm not sure what you exactly want, but when I change:

.my-card:hover {
    border-color:#3E7DC0;
}

to:

.my-card:hover {
    border: 2px solid #3E7DC0;
}

something else changes.
What I think you want:

  <div class="test1">
      <b-card no-body class="my-card border">
          <button>Click here</button>
    
          <b-collapse>
              <b-card-body>
                  <b-card-text>text here</b-card-text>
              </b-card-body>
          </b-collapse>
      <b-card>
  </div>

CSS:

.test1:hover {
  border: 2px solid #3E7DC0;
}

Let me know if this is what you wanted. I'm not so experienced myself, but if I can, I'd love to help you out.

How to have border color change on image hover/mousover?

You can use the :hover psuedo selector:

img:hover {
  border-color: red;
}

Also, if you want it to be like a button, consider these styles as well:

img {
  cursor: pointer;
}
img:active {
  border-color: blue;
}

img {  border: 2px solid black;  cursor: pointer;}img:hover {  border-color: red;}img:active {  border-color: blue;}

<img src="http://via.placeholder.com/150x150" alt="Sample Image"><img src="http://via.placeholder.com/150x150" alt="Sample Image"><img src="http://via.placeholder.com/150x150" alt="Sample Image">

Cannot get css border colors to change on hover

added the about class to HTML and targeted it in css using #buttons li.about:hover

body {
  background-color: lightblue;
}

a {
  color: white;
  text-decoration: none;
}

#buttons li {
  background-color: blue;
  color: white;
  border-radius: 30px 66px 9px 66px;
  border-color: violet violet orange yellow;
  border-style: solid;
  border-width: 5px 10px 20px 30px;
  box-shadow: -15px 5px 20px 5px black;
  /*1px left right, 2px up down */
  padding: 30px 32px;
  text-align: center;
  display: inline;
  font-size: 20px;
}

#buttons li.about:hover {
  background-color: yellow;
  border-color: blue;
  color: blue;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Exercise 5</title>

</head>

<body>

  <ul id="buttons">
    <li><a href="#">Home</a></li>
    <li class="about"><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>

</body>

</html>

Change button border on hover

.button {
          margin-right: 20px;
          width:300px;
          height:300px;
          background-color: transparent;
          border:none;
  }
  .button:hover {
        border: 2px solid  blue;
        border-radius: 20px;
        cursor:pointer;
            }

<input type="button" class = "button"   value="Panda"
/>

How to change text color while hovering around border in CSS?

I'm assuming that .project-text is inside of .item. You can create a CSS selector to that styles the children based on hover state of the parent. See commented code below; I added a padding on .item to better show the result.

.item {    border: solid 0px;    border-spacing: 10px;    background: rgba(164, 165, 219, 0.45);    border-radius: 20px;    padding: 2rem /* two times the font size of the body */}
.item:hover {    background: rgba(72, 74, 196, 0.45);}
.project-text {    color: rgb(43, 41, 41);    font-size: 50px;}
.item:hover .project-text { /* changed selector */    color: white;
}

<div class="item">  <p class="project-text">    Hello  </p></div>

Change table border upon hover

Updated better solution

Don't know why I didn't tackle the core issue from the start but your main issue was the item below was getting pushed down, well you can target the next item and set the border top to none

tr:hover + tr td {
    border-top: none;
}

The rest of your original code remains intact

table {    border-collapse: separate;    border-spacing: 0;}
td {    border: solid 1px black;    border-style: solid none;    padding: 10px;    border-bottom: 0;}
tr:hover + tr td {    border-top: none;}
td:first-child {    border-left-style: solid;    border-top-left-radius: 10px;    border-bottom-left-radius: 10px;}
td:last-child {    border-right-style: solid;    border-bottom-right-radius: 10px;    border-top-right-radius: 10px;}
tr:last-child td {    border-bottom: solid 1px black;}
tr:hover {    /*background-color: #cad6ed;*/}
tr:hover td {    border: 1px solid #12A0F8;    border-style: solid none;    padding: 10px;}
tr:hover td:first-child {    border-left-style: solid;    border-top-left-radius: 10px;    border-bottom-left-radius: 10px;}
tr:hover td:last-child {    border-right-style: solid;    border-bottom-right-radius: 10px;    border-top-right-radius: 10px;}

<table>  <tr>    <td>One</td><td>Two</td><td>Three</td>  </tr>  <tr>    <td>One</td><td>Two dfds</td><td>Three</td>  </tr>  <tr>    <td>One</td><td>Two</td><td>Three</td>  </tr></table>

Changing color of bottom border on hover

You can use a pseudoelement.

You create the border to show on hover, position it in relation to the handle, and set it to be transparent until it's hovered over:

Updated plunker

Relevent CSS:

  .ui-resizable-handle:after {
    content: '';
    display: block;
    height: 1px;
    width: 100%;
    background: transparent;
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
  }

  .ui-resizable-handle:hover:after {
    background: blue;
  }

how can i change my border's color and label's color with same psuedo class

Move the container styles to #mainm and add the color: white; to :hover.

Make note of the other styles I changed to clean it up a bit. I added text-align: center; to the id and removed the height. Instead of a fixed height just use padding.

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');

/*  font-family: 'Open Sans', sans-serif;*/

body {
  background-color: #14213d;
  margin: 0;
}

.container li {
  list-style: none;
}

.container {
  width: 100%;
  height: 100%;
}

li#mainm {
  border: 2px solid #fca311;
  width: 400px;
  padding: 30px 0px;
  position: relative;
  left: 720px;
  top: 400px;
}

#mainm {
  font-family: 'Open Sans', sans-serif;
  color: #e63946;
  font-size: 25px;
  text-align: center;
}

#mainm:hover {
  transition: 2s;
  border-radius: 15px;
  border-color: #43aa8b;
  color: white;
  background-color: #43aa8b;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">
    <ul>
      <li id="mainm">Site Hazırlanma Aşamasında</li>
    </ul>
  </div>

</body>

</html>

CSS Change Border Color on Hover